Question

这是我认为应该再次插入相同行的代码，因为我们在这里使用append()。而不是先删除行。

＆＃13;

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])}
})

});

＆＃13;

<!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>

＆＃13;

如果我使用for (var i = 0; i < rows.length; i++){table.append('<tr><td>data1</td><td>data2</td></tr>')}

然后它实际上添加了行（正如我预期的那样），但在第一种情况下它并没有做同样的事情，我认为它必须对我们在那里使用对象的事实做一些事情，但我不确定

有人可以解释原因吗？

感谢

Answer 1

追加文档中已存在的子项会移动它。

如果您想“克隆”这些行，请使用table.find("tr:gt(0)").clone();并附加这些行。

为什么这个Javascript代码没有在表中添加行

1 个答案: