javascript - 如何为 jQuery 可排序的新项目和已删除项目获取递增序列号？

Question

使用 jQuery sortable函数，我有一个简单的表格，其中的条目是可排序的。我已经弄清楚如何在移动条目时更新条目的索引，但在添加新条目时遇到问题。这是工作fiddle .

到目前为止，我添加递增序列索引的操作一团糟，因此在我的示例中，我刚刚添加了 <td class="index">1</td>在 append .

所以我的问题是:

1. 如何获得递增的序列号？什么时候添加新项目？并且
2. 当删除一个项目时，序列会崩溃，直到我移动一个项目。当一件商品被移除时，如何更新序列号？

提前非常感谢您的建议。

由于我不明白，这里的代码片段不起作用，但我还是添加了:

$(document).ready(function() {
   var fixHelperModified = function(e, tr) {
         var $originals = tr.children();
         var $helper = tr.clone();
         $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width())
         });
         return $helper;
      },
      updateIndex = function(e, ui) {
         $('td.index', ui.item.parent()).each(function(i) {
            $(this).html(i + 1);
         });
      };
   $("#sort tbody").sortable({
      helper: fixHelperModified,
      stop: updateIndex
   }).disableSelection();
   $("#addNew").click(function() {
      $('#add').append("<tr><td class='index'>1</td><td>1969</td><td><input name='foo'><button class='delete'>Delete</button></td></tr>");
   });
   $("body").on('click', '#add .delete', function() {
      $(this).closest(".rem").remove();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="sort" class="grid">
    <button id='addNew'>Add new item</button>
    <thead>
        <tr><th class="index">No.</th><th>Year</th><th>Title</th></tr>
    </thead>
    <tbody id="add">
        <tr class="rem"><td class="index">1</td><td>1969</td><td><input name="foo"><button class="delete">Delete</button></td></tr>
        <tr class="rem"><td class="index">2</td><td>1952</td><td><input name="bar"><button class="delete">Delete</button></td></tr>
        <tr class="rem"><td class="index">3</td><td>1963</td><td><input name="baz"><button class="delete">Delete</button></td></tr>
    </tbody>
</table>

Answer 1

在这里，我在代码中添加了注释来解释我所做的事情。

$(document).ready(function() {
   var fixHelperModified = function(e, tr) {
         var $originals = tr.children();
         var $helper = tr.clone();
         $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width())
         });
         return $helper;
      },
      // the updateIndex function works just fine without any parameters
      updateIndex = function() {
         $('td.index').each(function(i) {
            $(this).html(i + 1);
         });
      };
   $("#sort tbody").sortable({
      helper: fixHelperModified,
      stop: updateIndex
   }).disableSelection();
   $("#addNew").click(function() {
      $('#add').append("<tr class='rem'><td class='index'>1</td><td>1969</td><td><input name='foo'><button class='delete'>Delete</button></td></tr>");
      // just update indicies after adding a new element
      updateIndex();
   });
   $("body").on('click', '#add .delete', function() {
      $(this).closest(".rem").remove();
      // same after removing an element
      updateIndex();
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<table id="sort" class="grid">
    <button id='addNew'>Add new item</button>
    <thead>
        <tr><th class="index">No.</th><th>Year</th><th>Title</th></tr>
    </thead>
    <tbody id="add">
        <tr class="rem"><td class="index">1</td><td>1969</td><td><input name="foo"><button class="delete">Delete</button></td></tr>
        <tr class="rem"><td class="index">2</td><td>1952</td><td><input name="bar"><button class="delete">Delete</button></td></tr>
        <tr class="rem"><td class="index">3</td><td>1963</td><td><input name="baz"><button class="delete">Delete</button></td></tr>
    </tbody>
</table>