Why this Javascript code not adding the rows in the table

Question

Here is the code which i think should insert the same rows again because we are using append() here. and not removing the rows first.

jQuery(document).ready(function(){
 jQuery('#add_rows').click(function(){
  
    var table = jQuery("#myTable");
    var rows = table.find('tr:gt(0)').toArray();
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})

});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<title>Sort a HTML Table Alphabetically</title>
</head>
<body>
<button id ="add_rows">Add rows </button>

<table id="myTable">
  <tr>
    <th class="sort_table">Name</th>
    <th class="sort_table">Country</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
  </tr>
</table>

If i use for (var i = 0; i < rows.length; i++){table.append('<tr><td>data1</td><td>data2</td></tr>')}

Then it actually add the rows (As i expected), but in first case it doesn't do the same, i think it has to do something with the fact that we are using objects there but i am not sure

Could someone explain the reason ?

thanks

It'll move the current rows you select. You might want to check the .clone() method in jQuery. — kmdm
– kmdm, Commented Dec 4, 2017 at 11:50
whch line exactly moving the current rows, could you pls explan ?@kmdm — user9050678
– user9050678, Commented Dec 4, 2017 at 11:51

Niet the Dark Absol · Accepted Answer · 2017-12-04 11:51:03Z

4

Appending a child that already exists in the document moves it.

If you want to "clone" those rows, use table.find("tr:gt(0)").clone(); and append those.

answered Dec 4, 2017 at 11:51

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user9050678 Over a year ago

Thanks, i didn't know that Appending a child that already exists in the document moves it. very informative, thanks

Collectives™ on Stack Overflow

Why this Javascript code not adding the rows in the table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related