Question

在一个html表中，我在每一行都有一个具有自己位置编号的单元格。在使用jQueryUI进行排序后，如何正确刷新此位置编号？

这是我的简单html：

<table border="0">
<thead>
      <tr>
        <th scope="col">Position number</th>
        <th scope="col">Name</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td>1</td>
        <td>Text</td>
      </tr> 
      <tr>
        <td>2</td>
        <td>Text</td>
      </tr>
  </tbody>        
</table>

这是我的js：

    var fixHelper = function(e, ui) { ui.children().each(function() { $(this).width($(this).width()); }); return ui; };

    $("table tbody").sortable({ 
        helper: fixHelper
    }).disableSelection();

现在我想在完成排序后正确更改订单的正确位置数值。

我该怎么做？

任何帮助都将不胜感激。

Answer 1

排序后执行以下操作..

$("table tbody").sortable({ 
    update: function(event, ui) {  
        $('table tr').each(function() {
            $(this).children('td:first-child').html($(this).index())
        });
    },
    helper: fixHelper
}).disableSelection();

你可以尝试（未经测试）：而不是$('table tr').each使用$(this).parents('table').find('tr').each

解释.. 它循环遍历表格中的每个tr标记，然后更改第一个td-child的内容，其索引值为tr

Answer 2

如果有人像我一样喜欢上述答案，那么这就是Coffeescript

jQuery ->
  $("ul.sortableEdit").sortable
            stop: (event, ui) ->  
             $('ul.sortableEdit li').each( ->
               $(this).children('input.sortableItemPos').val($(this).index())
             )

jQuery ui可排序的表格刷新数字位置

2 个答案: