Javascript 如何在.hide（）之后对剩余的表行重新编号_Javascript_Jquery_Html Table

Javascript 如何在.hide（）之后对剩余的表行重新编号

javascript jquery

Javascript 如何在.hide（）之后对剩余的表行重新编号,javascript,jquery,html-table,Javascript,Jquery,Html Table,Javascript会增加静态表中动态生成的行中的每个可见数字 jQuery在单击时会尽职尽责地隐藏每一行，但是，当然，数字不会改变。当访问者删除了不需要的行后，如何使用jQuery对行重新编号？我希望用户单击“重新编号”以正确重新编号其余行。我所做的不起作用：- 非常感谢您的帮助 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <sc

Javascript会增加静态表中动态生成的行中的每个可见数字

jQuery在单击时会尽职尽责地隐藏每一行，但是，当然，数字不会改变。当访问者删除了不需要的行后，如何使用jQuery对行重新编号？我希望用户单击“重新编号”以正确重新编号其余行。我所做的不起作用：-

非常感谢您的帮助

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script language="javascript" type="text/javascript">
 var keepTrack = 1;      
 </script>
 <table>
 <tr><td colspan="2" id="renumber">renumber</td></tr>

 <tr id="sWH1">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

<script>
$(document).ready(function() { 
$("#sWH1").click(function() {
$("#sWH1").hide(100);}); 
 });</script>


 <tr id="sWH2">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

 <script>
 $(document).ready(function() { 
 $("#sWH2").click(function() {
 $("#sWH2").hide(100);}); 
  });</script>


 <tr id="sWH3">
 <td>
 <script>
 document.write(keepTrack);keepTrack++;
 </script></td>
 <td>someWordsHere</td></tr>

 <script>
 $(document).ready(function() { 
 $("#sWH3").click(function() {
 $("#sWH3").hide(100);}); 
  });</script>

 </table>

 <script language="JavaScript" type="text/JavaScript">
 $(document).ready(function() {
 $("#renumber").click(function() {
 'magically renumber the remaining table rows'
 });
  });
 </script>

直截了当的答案

要对行重新编号，您可以使用each方法，该方法允许您在一组元素上迭代（在本例中为行），并提供i枚举器参数

一个普遍的例子：

$(some-tr-selector).each(function(i) {
    $(this).children(some-td-selector).text(i+1);
});

现在要做到这一点，您需要定义更好的选择器。当前代码的问题是选择器太具体。这将阻止您创建常规事件处理程序，而不是为每行创建单击处理程序

如何改进代码

考虑为相关编号行设置一个类。这将允许您为所有行创建一个单击处理程序，并使相关行在重新编号时更易于选择

例如：

$(document).ready(function() {
     // Number all rows onload
    $('table tr.numbered_row').each(function(i) {
        $(this).children('.row_number').text(i+1);
     // Row click handler
    }).on('click', function() {
         // Hide current row
        $(this).hide(100);
         // Renumber visible rows
        $('table tr.numbered_row:visible').each(function(i) { // Iterate over all _visible_ rows
            $(this).children('.row_number').text(i+1);
        });
    });
});

HTML

请注意，通过添加两个编号为row和row的类，我们可以在一个代码块中高效地完成所有工作：行的初始编号、隐藏行的单击处理程序以及重新编号操作

更一般的方法

如果您愿意，您可以通过链接each和on方法以及在每次隐藏行时处理on中的重新编号，使其更加通用和高效

例如：

$(document).ready(function() {
     // Number all rows onload
    $('table tr.numbered_row').each(function(i) {
        $(this).children('.row_number').text(i+1);
     // Row click handler
    }).on('click', function() {
         // Hide current row
        $(this).hide(100);
         // Renumber visible rows
        $('table tr.numbered_row:visible').each(function(i) { // Iterate over all _visible_ rows
            $(this).children('.row_number').text(i+1);
        });
    });
});