避免使用jQuery重复

Question

如何避免使用jQuery重复数据？ 我的代码是：

<button  id="gen">Generate</button>
<table id="report" border="1" style="visibility:hidden">
    <tr>
        <th>Sl.No.</th>
        <th>District Name</th>
    </tr>
</table>

js：

$("#gen").click(function(){
$("#report").css("visibility","visible");
for(var i=0; i<5; i++){
  var row='<tr><td>('+(i+1)+')</td></tr>'
  $("#report").append(row);
 }
});

每次单击按钮时，都会显示相同的数据。 如何避免呢？ sqlfiddle： http : //jsfiddle.net/etdx5o08/

Answer 1

做这个：

 $("#gen").click(function() { $("#report").parent().show(); var rows=''; for (var i = 0; i < 5; i++) { rows = rows+'<tr><td>(' + (i + 1) + ')</td><td></td></tr>' } $("#report").html(rows); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="gen">Generate</button> <table border="1" style="display:none"> <thead> <tr> <th>Sl.No.</th> <th>District Name</th> </tr> </thead> <tbody id="report"></tbody> </table> 

Answer 2

为了避免重复，您可以按如下所示简单地更新js。

$("#gen").click(function(){
$("#report").css("visibility","visible");
$("#report").html('<tr><th>Sl.No.</th><th>District Name</th></tr>');
for(var i=0; i<5; i++)
    {
        var row='<tr><td>('+(i+1)+')</td></tr>'
        $("#report").append(row);
    }
});

只需在循环开始前添加以下行即可。

$("#report").html('<tr><th>Sl.No.</th><th>District Name</th></tr>');

这是jsFiddle 。

希望能帮助到你 ：）

Answer 3

$("#gen").click(function(){
    $("#report").css("visibility","visible");
    var table = $("#report tbody tr");
    for(var i=0; i<5; i++){
        var row='<tr><td>('+(table.length+1+i)+')</td></tr>'
        $("#report").append(row);
    }
});  

演示版