1

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>
4

2 回答 2

3

直截了当的答案

要对行重新编号，您可以使用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()如果您愿意，您可以通过链接andon()方法以及在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);
        });
    });
});
于 2013-02-16T20:25:24.517 回答
2

这是另一个解决方案：

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

这是您的代码，更改很少：该表有一个 id=myTable 并且“神奇地重新编号剩余的表行”已替换为

$('#myTable tr[id]:visible').each(function(i){
   $(this).find('td:first').text(i+1);
})
于 2013-02-16T23:07:01.010 回答