如何更新jQuery UI可排序表行的排名

Question

请您查看This Demo并告诉我如何在使用jQuery UI排序对行进行排序时对可排序表进行重新编号（排序）？

你可以看到我有

<table>
    <thead>
        <tr>
            <th>Elem 1</th>
            <th>Elem 2</th>
            <th>Rank</th>
        </tr>
    </thead>    
    <tbody>
        <tr class="border_bottom">
            <td>X</td>
            <td>Y</td>
            <td>1</td>
        </tr>
        <tr class="border_bottom">
            <td>X</td>
            <td>Y</td>
            <td>2</td>
        </tr>
        <tr class="border_bottom">
            <td>X</td>
            <td>Y</td>
            <td>3</td>
        </tr>
        <tr class="border_bottom">
            <td>X</td>
            <td>Y</td>
            <td>4</td>
        </tr>
        <tr class="border_bottom">
            <td>X</td>
            <td>Y</td>
            <td>5</td>
        </tr>  
    </tbody>    
</table>

和

$( "tbody" ).sortable();

由于

Answer 1

每当发生update事件时，您可以选择最后<td>个并使用text()方法更新其文本，方法是返回其父tr的索引相对于使用index()方法的所有<tr>元素如下：

$("tbody").sortable({
  update: function(e, ui) {
    $("tr td:nth-child(3)").text(function() {
      return $(this).parent().index("tr");
    });
  }
});

body {
  padding: 30px;
}
table {
  border-spacing: collapse;
  border-spacing: 0;
}
td {
  width: 60px;
  height: 25px;
  text-align: center;
}
tr.border_bottom td {
  border-bottom: 1pt solid grey;
  background: khaki;
}

<link href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<table>
  <thead>
    <tr>
      <th>Elem 1</th>
      <th>Elem 2</th>
      <th>Rank</th>
    </tr>
  </thead>
  <tbody>
    <tr class="border_bottom">
      <td>X</td>
      <td>Y</td>
      <td>1</td>
    </tr>
    <tr class="border_bottom">
      <td>X</td>
      <td>Y</td>
      <td>2</td>
    </tr>
    <tr class="border_bottom">
      <td>X</td>
      <td>Y</td>
      <td>3</td>
    </tr>
    <tr class="border_bottom">
      <td>X</td>
      <td>Y</td>
      <td>4</td>
    </tr>
    <tr class="border_bottom">
      <td>X</td>
      <td>Y</td>
      <td>5</td>
    </tr>
  </tbody>
</table>