Jquery table row index after move

Question

I created a question yesterday to help me find the new index of a <tr> or a <li> once it has been moved using Jquery UI drag & drop functionality, and this works perfectly :)

Something I did not think about however and have been trying to figure out this morning, is... How would I find the index of the <tr> or <li> that is being shifted up or down.

EG: Given the below table, if I Move "email" into position 1, "other" will be shifted into index of 2. How would I alert this value and its RefID ?

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

Here is a FIDDLE I have been playing with.

Thanks you in advance guys.

Mike

EDIT: So, I was just moving them around a bit more, and if you move another row above the ones we just moved, "Other" will now be in index 3. Yikes!! Getting more complicated for me as I look at this thing.

Milind Anantwar · Answer 1 · 2015-01-20T09:19:20.863

0

You need to use :eq() selector to target only required tr element.

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

Working Demo

edited Jan 20 '15 at 09:19

answered Jan 20 '15 at 09:14

Milind Anantwar

81,290
25
94
125

no need to search the DOM twice to get the row when it's already available as `ui.item` – charlietfl Jan 20 '15 at 09:28
ohh. did not saw the ref being fetched too. – Milind Anantwar Jan 20 '15 at 09:32

score 0 · Answer 2 · answered Jan 20 '15 at 09:21

0

You are always getting the html from the first row , regardless of which row was moved.

Since ui.item is the <tr> that was moved , you can access the td by looking within ui.item

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

DEMO

answered Jan 20 '15 at 09:21

charlietfl

170,828
13
121
150

score 0 · Accepted Answer · answered Jan 20 '15 at 11:04

So I probably didn't phrase my question correctly, but I managed to get what I wanted by just checking the index and RefID of all the rows after moving them.

My code now looks like this:

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

And here is the working FIDDLE

Thank for your help!

Jquery table row index after move

3 Answers3