Jquery table 移动后的行索引

Question

我昨天创建了一个来帮助我找到 <tr> 或 <li> 使用 Jquery UI 拖放功能移动后的新索引，这非常有效 :)

但是我没有想到并且今天早上一直在努力弄清楚的事情是...我如何找到 <tr> 或 <li> 的 index正在向上或向下移动。

EG：给定下面的 table，如果我将 "email" 移动到位置 1，"other" 将移动到 2 的 index。我将如何提醒这个值及其 RefID ?

+--------+------------------+
| Ref ID | Issue relates to |
+--------+------------------+
|   9342 | Other            |
|   9392 | CRM              |
|   9394 | CRM              |
|   9308 | eMail            |
|   9365 | CRM              |
+--------+------------------+

这是我一直在玩的FIDDLE

提前谢谢你们。

麦克

编辑： 所以，我只是将它们移动了一点，如果你在我们刚刚移动的那些之上移动另一行，"Other" 现在将是在 index 3. 哎呀！！当我看着这个东西时，我变得更加复杂。

Answer 1

您需要使用 :eq() 选择器来仅定位必需的 tr 元素。

var RefID = $('tr').eq(Newpos).find('td:first').html();
var RefName = $('tr').eq(Newpos).find('td:eq(1)').html();

Working Demo

Answer 2

无论移动了哪一行，您总是从第一行开始 html。

由于 ui.item 是移动的 <tr>，您可以通过在 ui.item

中查找来访问 td

var RefID = ui.item.find('td:first').html();

DEMO

Answer 3

所以我可能没有正确表达我的问题，但我通过在移动它们之后检查所有 rows 的 index 和 RefID 设法得到了我想要的.

我的代码现在看起来像这样：

 $(document).ready(function () {

     $('tbody').addClass("DragMe");

     $('.DragMe').sortable({
         disabled: false,
         axis: 'y',
         items: "> tr:not(:first)",
         forceHelperSize: true,
         update: function (event, ui) {
             var Newpos = ui.item.index();
             var RefID = $('tr').find('td:first').html();


             //alert("Position " + Newpos + "..... RefID: " + RefID);
             $("#GridView1 tr:has(td)").each(function () {
                 var RefID = $(this).find("td:eq(0)").html();
                 var NewPosition = $("tr").index(this);
                     alert(RefID + " " + NewPosition);

             });

         }
     }).disableSelection();
 });

这是工作 FIDDLE

感谢您的帮助！

Jquery table 移动后的行索引

Jquery table row index after move

jquery

html

jquery-ui

jquery-ui-draggable