jQuery ui sortable tablerows 刷新里面的数字位置答案

【问题标题】：jQuery ui sortable tablerows refresh number position insidejQuery ui sortable tablerows 刷新里面的数字位置
【发布时间】：2012-02-03 04:59:36
【问题描述】：

在一个 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();

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

我怎样才能做到这一点？

任何帮助将不胜感激。

【问题讨论】：

标签： jquery jquery-ui html-table jquery-ui-sortable

【解决方案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 的索引值

【讨论】：

非常感谢，很好的回答和很好的解释，效果很好。我接受并投票给你的答案，如果你愿意，你可以对我的问题做同样的事情。非常感谢！
也帮助了我 - 很好的回应和问题

【解决方案2】：

如果有人像我一样喜欢上面的答案，这里是 Coffeescript

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

【讨论】：