Почему этот код Javascript не добавляет строки в таблицу

Question

Почему этот код Javascript не добавляет строки в таблицу

1

Вот код, который, я думаю, должен вставлять те же строки снова, потому что мы используем append() здесь. и не удаляя сначала строки.

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>

Если я использую for (var я = 0; я < rows.length; i++){table.append('<tr><td>data1</td><td>data2</td></tr>')}

Затем он фактически добавляет строки (как и ожидалось), но в первом случае он не делает то же самое, я думаю, что он должен что-то делать с тем, что мы используем объекты там, но я не уверен

Может ли кто-нибудь объяснить причину?

Спасибо

user9050678 04 дек. 2017, в 13:10

Источник

0

Это переместит текущие выбранные вами строки. Возможно, вы захотите проверить метод .clone () в jQuery.
kmdm 04 дек. 2017, в 11:50
0

какая строка точно перемещает текущие строки, не могли бы вы объяснить, пожалуйста? @kmdm
user9050678 04 дек. 2017, в 11:51

Теги:

javascript

1 ответ

Ещё вопросы

Это переместит текущие выбранные вами строки. Возможно, вы захотите проверить метод .clone () в jQuery.
какая строка точно перемещает текущие строки, не могли бы вы объяснить, пожалуйста? @kmdm

Niet the Dark Absol · Accepted Answer · 2017-12-04T09-18-00.000Z

Добавление этого документа, который уже существует в документе, перемещает его.

Если вы хотите "клонировать" эти строки, используйте table.find("tr:gt(0)").clone(); и добавьте их.

Спасибо, я не знал, что Appending a child that already exists in the document moves it. очень информативно, спасибо