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);
        });
    });
});

Answer 2

这是另一种解决方案：

http://jsbin.com/ufahac/1/edit

这是您的代码，几乎没有变化：表格有一个id = myTable 并且 '神奇地重新编号剩余的表格行 已被替换为

$('#myTable tr[id]:visible').each(function(i){
   $(this).find('td:first').text(i+1);
})

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

2 个答案: