jquery - 如何在通过 jquery 删除行后重新计算 html 表中的序列号

Question

我有以下表格布局:

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
  <tr id="5"><td>3</td><td>Centro</td><td>Francisco</td<td>Mexico</td></tr>
  <tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>     
</table>

现在，按下删除按钮后，jquery 函数将 tr id 发布到正在处理的 php 页面，并且在成功删除 php 和 mysqli 操作后，正在处理的 php 页面向表页面发送回调消息。 jquery 函数然后从 html 表中删除后续行:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var id = $(this).closest('tr').attr('id'); 
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;
          if(callback_msg=='delete'){
            $('#'+id).remove();
          }
       });
});

因此，如果用户希望删除 tr id 为 5 的第 3 行，则在删除该行后，S/N 列保持不变，如下所示:

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td<td>Germany</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td<td>Sweden</td></tr>
  <tr id="8"><td>4</td><td>Handel</td><td>Roland</td<td>Austria</td></tr>     
</table>

您可以看到序列号列现在是 1、2、4(因为序列号 3 已被删除)。

我如何在我的 jquery 代码中包含一个函数，以便在删除后它将序列号重新排序为 1、2、3(即最后一行的序列号将变为 3)？

[注意:删除可能在中间一行。所以 .last() 选择器在这种情况下可能不起作用]

Answer 1

删除该行后，只需循环更新其 sibling 的第一个单元格:

var callback_msg = data.return_msg;
if(callback_msg=='delete'){
    var row = $(document.getElementById(id)); // Or continue to use the invalid ID selector: '#'+id
    var siblings = row.siblings();
    row.remove();
    siblings.each(function(index) {
        $(this).children('td').first().text(index + 1);
    });
}

实例 (我必须向每一行添加一个 .del 元素，我假设您正在某处这样做...):

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var row = $(this).closest('tr');
   var id = row.attr("id");
   alert("Deleting id #" + id);
   setTimeout(function() { // Simulating ajax
       var siblings = row.siblings();
       row.remove();
       siblings.each(function(index) {
         $(this).children().first().text(index);
       });
   }, 100);
});

.del {
  cursor: pointer;
}

<table border="1" id="staff">
  <tr><th>S/N</th><th>Company</th><th>Contact</th><th>Country</th><th></th></tr>
  <tr id="1"><td>1</td><td>Futter</td><td>Anders</td><td>Germany</td><td class="del">X</td></tr>
  <tr id="2"><td>2</td><td>Berglunds</td><td>Christina</td><td>Sweden</td><td class="del">X</td></tr>
  <tr id="8"><td>3</td><td>Handel</td><td>Roland</td><td>Austria</td><td class="del">X</td></tr>
  <tr id="9"><td>4</td><td>JLR</td><td>Jag</td><td>UK</td><td class="del">X</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

从评论来看，您似乎不确定将上述内容放在哪里。这是在上下文中:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var id = $(this).closest('tr').attr('id'); 
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;                   //
          if(callback_msg=='delete'){                           //
            var row = $(document.getElementById(id));           // Changed
            var siblings = row.siblings();                      // code
            row.remove();                                       // is
            siblings.each(function(index) {                     // here
                $(this).children('td').first().text(index + 1); //
            });                                                 //
          }                                                     //
       });
});

虽然实际上，这会更有效并且完全避免通过 id 进行选择:

$("body").on("click",".del",function(event){
   event.preventDefault();
   var table= 'staff';
   var row = $(this).closest('tr');                            // *
   var id = row.attr('id');                                    // *
       $.post(url,
        {
         table: tbl,
         trid: id,
        },function(data){
          var callback_msg = data.return_msg;                   // *
          if(callback_msg=='delete'){                           // *
            var siblings = row.siblings();                      // *
            row.remove();                                       // *
            siblings.each(function(index) {                     // *
                $(this).children('td').first().text(index + 1); // *
            });                                                 // *
          }                                                     // *
       });
});

---

当 id 是数字时使用 '#'+id 的注意事项:ID 选择器以数字开头(如 #1、#42 等)无效。 jQuery 单独支持它们(例如，$("#1") 有效，但 $("#1 span") 不支持)作为 副产品 它优化了它们，在幕后使用 getElementById。这是未记录的行为，理论上可以随时更改。 (事实上​​，如果他们改变它，我无法想象他们会破坏多少网站。:-))我避免依赖未记录的行为，所以我建议 $( document.getElementById(id))，它完全依赖于记录的行为。