javascript - 如何在 .hide() 之后对剩余的表行重新编号

Question

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>

Answer 1

直截了当的答案

要对行重新编号，您可以使用 each() 方法，该方法允许您遍历一组元素(在本例中为行)并提供一个 i枚举参数。

一个一般的例子:

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

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

如何改进您的代码

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

例如:

HTML

<table>
    <tr><td colspan="2" id="renumber">renumber</td></tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    <tr class="numbered_row">
        <td class="row_number"></td>
        <td>someWordsHere</td>
    </tr>
    ...
</table>

Javascript

$(document).ready(function() {
     // Number all rows onload
    $('table tr.numbered_row').each(function(i) {
        $(this).children('.row_number').text(i+1);
    });

     // Row click handler
    $('table tr.numbered_row').on('click', function() {
        $(this).hide(100);
    });

     // Renumber click handler
    $('#renumber').on('click', function() {
        $('table tr.numbered_row:visible').each(function(i) { // Iterate over all _visible_ rows
            $(this).children('.row_number').text(i+1);
        });
    });
});

注意如何通过添加两个类 numbered_row 和 row_number 我们能够在一个代码块中高效地完成所有事情:行的初始编号，单击处理程序以隐藏它们和重新编号操作。

一种更通用的方法

如果您愿意，可以通过链接 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);
        });
    });
});