使用 jQuery 加载 html table 时出现重复记录

Question

我想使用 jQuery 填充 table。我有一个字符串数组，当我单击一个按钮以运行一个函数时，我想使用该数组来填充 table。第一次单击该按钮时，它运行良好，但是当我第二次调用该函数时，行重复了：/（table 未重置）

我的html代码：

  <table id="tableIdentity" class="table table-striped">
    <tr>
       <th>name</th>
    </tr>
  </table>

   <button type="button" onclick="loadTable();">load table</button>

我的js函数：

function loadTable() {

   var data = ['allan','ronaldo','damian'];

   for(var i = 0; i<data.length; i++) {
       var row = '<tr><td>'+data[i]+'</td></tr>';
       $('#tableIdentity').append(row);
   }
}

Answer 1

如果您多次调用该函数而没有先清除添加的行，它只会运行为每一行再次追加。这将在您单击按钮时多次添加内容。如果您不想这样做，您可以先删除行，例如：

function loadTable() {

   var data = ['allan','ronaldo','damian'];
   $("#tableIdentity tr").remove()
   for(var i = 0; i<data.length; i++) {
       var row = '<tr><td>'+data[i]+'</td></tr>';
       $('#tableIdentity').append(row);
   }
}

Answer 2

您可以添加一个 class 并在单击

时将其删除

function loadTable() {    
   var data = ['allan','ronaldo','damian'];
   $('#tableIdentity .append_class').remove();
   for(var i = 0; i<data.length; i++) {
       var row = '<tr class="append_class"><td>'+data[i]+'</td></tr>';
       $('#tableIdentity').append(row);
   }
}

使用 jQuery 加载 html table 时出现重复记录

Duplicate records when loading html table with jQuery

jquery

function

html-table

duplicates

records