如何使用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/
答案 0 :(得分:3)
这样做:
$("#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;
答案 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 强>