如何更新jQuery UI可排序表行的排名 [英] How to Update Ranking on jQuery UI Sortable Table Rows

问题描述

能否请您查看此演示，并让我知道如何重新编号(排序)使用jQuery UI可排序的行时可排序的表?

Can you please take a look at This Demo and let me know how I can Re number (order) the sortable table when the rows are sorted using jQuery UI sortable?

您可以看到我有

<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();

谢谢

推荐答案

每当更新事件，您可以选择最后一个<td>并使用 text() 方法，方法是使用 index() <tr>元素的父元素tr的索引>方法如下:

Whenever an update event occurs, You can select the last <td>'s and update their text using text() method by returning the index of it's parent tr relative to all <tr> elements using index() method as follows:

$("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>

这篇关于如何更新jQuery UI可排序表行的排名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！