Avatar of Whing Dela Cruz
Whing Dela Cruz
Flag for Anguilla asked on

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

HTMLJavaScript

Avatar of undefined
Last Comment
skullnobrains

8/22/2022 - Mon
SOLUTION
Leonidas Dosas

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
skullnobrains

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

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

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>
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
SOLUTION
skullnobrains

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Julian Hansen

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

Open in new window

skullnobrains

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

@skullnobrains - it actually does not matter - your way works as well.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Whing Dela Cruz

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
Log in to continue reading
Log In
Sign up - Free for 7 days
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
Whing Dela Cruz

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

ASKER
Thank you all!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Julian Hansen

You are welcome.
skullnobrains

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