jQuery ui可排序的表格刷新里面的数字位置 [英] jQuery ui sortable tablerows refresh number position inside

问题描述

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

In a html table I have in every row a cell with its own position number. How can I refresh this position number correctly after sorting with jQueryUI?

这是我的简单html：

This is my simple 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();

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

Now I'd like to change order correctly position number values after complete sorting.

我该如何做到这一点？

How can I make this?

任何帮助都将不胜感激。

Any help would be appreciated.

推荐答案

执行以下操作后排序..

Do the following after sorting ..

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

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

you can try (untested) : instead of $('table tr').each use $(this).parents('table').find('tr').each

说明..
循环遍历表中的每个 tr 标签，然后更改第一个内容 td-child ，索引值为 tr

Explanation.. It loops through each of the tr tags within table and then changes the content of first td-child with the index value of tr

这篇关于jQuery ui可排序的表格刷新里面的数字位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！