asked on 3/14/2017

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

HTML JavaScript

Last Comment

skullnobrains

3/15/2017

SOLUTION

Leonidas Dosas

3/14/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

skullnobrains

3/14/2017

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

Julian Hansen

3/14/2017

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

Whing Dela Cruz

3/14/2017

ASKER

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>

SOLUTION

skullnobrains

3/14/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Julian Hansen

3/14/2017

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

Open in new window

skullnobrains

3/14/2017

oups you're right @julian. forgot the ""

Julian Hansen

3/14/2017

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

Whing Dela Cruz

3/14/2017

ASKER

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();

ASKER CERTIFIED SOLUTION

Julian Hansen

3/14/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

Whing Dela Cruz

3/14/2017

ASKER

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

Whing Dela Cruz

3/14/2017

ASKER

Thank you all!

Julian Hansen

3/14/2017

You are welcome.

skullnobrains

3/15/2017

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