Copying table data to one another

Hi experts, I have no idea but I want to know if there's a way to copy data from one table to another. I want to set on a function to work like this "copy Table2 to Table1 where the country is = "Germany"  Entire codes are in below. Thank you!

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}
</style>
</head>
<body>

<fieldset>
         <table id="Table1" style="cursor: pointer" class="two">
            <tbody style="font-size: 16px;">

            </tbody>
         </table>
</fieldset>
<button onclick="myFunction()">Load</button>

<table id="Table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Mac</td>
    <td>Malalis</td>
    <td>Germany</td>
  </tr>
</table>

<script>
function myFunction() {
    copy Table2 to Table1 where the country is = "Germany";
}
</script>
</body>
</html>

Open in new window

Whing Dela CruzAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Leonidas DosasCommented:
Lets say that we want to copy data into another table with an id Table1.
HTML:
<fieldset>
         <table id="Table1" style="cursor: pointer" class="two">
            <tbody style="font-size: 16px;">

            </tbody>
         </table>
</fieldset>
<button onclick="myFunction()">Load</button>

<table id="Table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Mac</td>
    <td>Malalis</td>
    <td>Germany</td>
  </tr>
</table>
  
  <table class="Table1"></table>

Open in new window


Javascript

function myFunction(){
var source = document.getElementById('Table2');
var destination = document.getElementById('Table1');
var copy = source.cloneNode(true);
copy.setAttribute('id', 'Table1');
destination.parentNode.replaceChild(copy, destination);
};

Open in new window

On the above code we create two var (source and destination) and the with another var we duplicate the node source.cloneNode
0
skullnobrainsCommented:
var table = document.getElementById("Table2");
for (var i = 0; table.rows.length; i++) {
   for (var j = 0; table.rows[i].cells.length; j++) {
     if ( table.rows[i].cells[j].innerHTML.indexOf('Germany' ) != -1 ){
       document.getElementById("Table1").appendChild(table.rows[i].cloneNode(true));
     }
   }
}

Open in new window

you'll need a little debug but the basics should be ok

using jquery you can do the equivalent with a one-liner
0
Julian HansenCommented:
You can do like so
<script src="http://code.jquery.com/jquery.js"></script>
<script>
function myFunction() {
	var rows = $('#Table2 tr:contains("Germany")').clone();
    $('#Table1 tbody').append(rows);
}
</script>

Open in new window

Working sample here
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Whing Dela CruzAuthor Commented:
Hi Julian, I tried your code and its working. However I want to ask one more about putting this in the function the word "Germany". Please correct as the code won't work. Thanks!

<button onclick="myFunction('Germany')">Load</button>

<script>
function myFunction(c1) {
      var rows = $('#Table2 tr:contains(c1)').clone();
    $('#Table1 tbody').append(rows);
  alert(c1);
}
</script>
0
skullnobrainsCommented:
<script>
function myFunction(c1) {
      var rows = $('#Table2 tr:contains('+c1+')').clone();
    $('#Table1 tbody').append(rows);
  alert(c1);
}
</script> 

Open in new window

0
Julian HansenCommented:
var rows = $('#Table2 tr:contains("' + c1 + '")').clone();

Open in new window

0
skullnobrainsCommented:
oups you're right @julian. forgot the ""
0
Julian HansenCommented:
@skullnobrains - it actually does not matter - your way works as well.
0
Whing Dela CruzAuthor Commented:
Hi Julian, please allow me to add one more related question here, I wish that the solution will only focus on the specific columns like the solution below. C1 here is equal to "Germany" and this is residing at columns 3. That if in columns 2, if the word Germany is found it should be ignored but focus only on columns 3. It is applicable?  Thank you!

var rows = $('#Table2 tr:contains("' + c1 + '")').clone();
0
Julian HansenCommented:
<script>
function myFunction(c1) {
  var rows = $('#Table2 tr td:contains("' + c1 + '")').each(function(i,e) {
    if ($(this).index() == 2) {
      $('#Table1 tbody').append($(e).parent().clone());
    }
  });
  alert('done');
}
</script>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Whing Dela CruzAuthor Commented:
Thank you so much Juliane, it's working very fine. More power to you and God bless!
0
Whing Dela CruzAuthor Commented:
Thank you all!
0
Julian HansenCommented:
You are welcome.
0
skullnobrainsCommented:
This alternative should be a little moe efficient ( but there might be typos )

$('Table2 tr:has(td:eq(2):contains("+c1+"))')

Also be careful with this.index which will break if there are subelements in the td such as a span containing the word
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.