使用jQuery加载html表时重复记录

Question

我想使用jQuery填充表。我有一个字符串数组，当我单击一个按钮来运行一个函数时，我想使用该数组来填充表。我第一次点击按钮，它工作得很好，但是当我第二次调用该函数时，行是重复的：/（表没有重置）

我的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 .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);
   }
}

Answer 2

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

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 3

在你的功能开始时尝试这个

$（ “＃tableIdentity> TD”）删除（）。