jQueryUI Sortableのテーブル列にあるポジション番号を更新したい

Question

HTMLテーブルのすべての列で、セルにポジション番号をもたせています。
このポジション番号を、jQueryUIでソートした後に正しく更新するにはどうすればいいでしょうか？

以下がHTMLになります。
`

<table border="0"> <thead> <tr> <th scope="col">行番号</th> <th scope="col">No</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タグをそれぞれループして、trのインデックス値で最初のtd-childのコンテンツを変更しています。