Copying table data to one another

Whing Dela Cruz
Whing Dela Cruz used Ask the Experts™
on
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

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Distinguished Expert 2017
Commented:
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
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
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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
Ensure you’re charging the right price for your IT

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

Author

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>
<script>
function myFunction(c1) {
      var rows = $('#Table2 tr:contains('+c1+')').clone();
    $('#Table1 tbody').append(rows);
  alert(c1);
}
</script> 

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018

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

Open in new window

oups you're right @julian. forgot the ""
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@skullnobrains - it actually does not matter - your way works as well.

Author

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();
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
<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

Author

Commented:
Thank you so much Juliane, it's working very fine. More power to you and God bless!

Author

Commented:
Thank you all!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial