使用jquery避免重复

时间:2015-04-23 06:53:42

标签: javascript jquery

如何使用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/

3 个答案:

答案 0 :(得分:3)

这样做:

&#13;
&#13;
$("#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);
     });
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

为避免重复,您只需更新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

希望有所帮助:)

答案 2 :(得分:0)

$("#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);
    }
});  

<强> Demo