避免重复使用jquery

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

来源

2015-04-23 jack rose

ü要避免重复什么？ – 2015-04-23 06:55:25

我想这就是你在说什么 - http://jsfiddle.net/etdx5o08/1/ –

请检查你更新的小提琴https://jsfiddle.net/etdx5o08/2/ –

这样做：

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

来源

2015-04-23 06:58:30 DelightedD0D

这与上面的代码有什么不同？我认为杰克在谈论Sl的重复。否 –

@VigneswaranMarimuthu它不同，因为它使用'.html（）'替换元素中的所有html，因为OPs原始代码只是简单地使用'.append（）'将每一行添加到元素，所以当他点击第二次，它在第一组下重复追加数据行...... – DelightedD0D

@ DelightedD0D：你的代码工作正常。但在我的问题中，起初桌子是隐藏的，点击按钮时，它必须是可见的。 –

为避免重复，您可以简单地更新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。

希望它能帮助:)

来源

2015-04-23 06:58:27 Prem

这将添加'。区域名称'每次按钮被点击。 –

@VigneswaranMarimuthu不会，它会用'替换元素的html。地区名称'每次按钮被点击，这就解决了问题 – DelightedD0D

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

来源

2015-04-23 07:04:06 ozil

避免重复使用jquery

回答

相关问题