We help IT Professionals succeed at work.

Copying table data to one another

Whing Dela Cruz
on
116 Views
Last Modified: 2017-03-15
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

CERTIFIED EXPERT
Distinguished Expert 2017
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT

Commented:
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
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

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>
CERTIFIED EXPERT
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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

Open in new window

CERTIFIED EXPERT

Commented:
oups you're right @julian. forgot the ""
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

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();
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION

Author

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

Author

Commented:
Thank you all!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.
CERTIFIED EXPERT

Commented:
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

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions