[英]Avoid duplication using 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/
做這個:
$("#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>
為了避免重復,您可以按如下所示簡單地更新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 。
希望能幫助到你 :)
$("#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);
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.