Get row index after order change

Question

I have a html table that looks something like this

<table id="eventTable">
  <thead>
    <tr><th>#</th><th>Options</th></tr>
  </thead>
  <tbody>
    <tr id="6">
      <td>6</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="5">
      <td>5</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="2">
      <td>2</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
    <tr id="4">
      <td>4</td><td><a href="www.site.com" class="moveUp">Up</a><a href="www.site.com" class="moveDown">Down</a></td>
    </tr>
  <
</table>

<p><a href="www.site.nl/process.php?type=order" id="saveOrder">Save order</a>

I use the following functions to change the row order


  $(".moveUp").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var row = $(this).closest('tr');
    row.prev().insertAfter(row);
  });

$(".moveDown").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var row = $(this).closest('tr');
    row.insertAfter(row.next());
  });

When the order is complete i have to save it (ofcourse). I have a textlink that passes the value via php to update the values in a database. My problem is how i can find the new position of the elements in the table. So far i have this function


  $("#saveOrder").click(function(e){
    var event = e || window.event;
    event.preventDefault();
    var t = "";
    $("#eventTable tr").each(function(){
      t += this.attr("id") || "";
      alert($(this).rowIndex);
    });
    window.location.href = $(this).attr("href")+"&sort="+t;
  });

This only passes al id attribute values from the table rows but i, somehow, need to pass the new tablerow-order as well. Anyone any idea how t achieve this? this.rowIndex doesn't seem to work

EDIT:

I tried Jasper's solution, but it's not fully (but a nice half ;)) what im looking for. See my example above, the id attributes represent the unique id of the database record. When i change the order of the table rows, i need to match the database id with the new position.

So at the start, my output coding would be

61|52|23|44
id 6 == row 1
id 5 == row 2
id 2 == row 3
id 4 == row 4

Suppose i switch the position of id 5 and 2, i want my output to be like this:


61|22|53|44
id 6 == row 1
id 2 == row 2
id 5 == row 3
id 4 == row 4

Hope this made it clear :)

Thanks for the help!

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

$('#saveOrder').click(function (e) {
    e.preventDefault();
    var $TRs = $('#eventTable').find('tr[id]'),//this only selects TR elements that have an ID attribute
        out  = [];
    for (var i = 0, len = $TRs.length; i < len; i++) {
        out.push($TRs.eq(i).attr('id'));
    }
    //now the ids are in order from top to bottom and stored in an array (`out`)
    window.location.href = $(this).attr("href") + "&sort=" + out.join('|');
});

Here is a demo: http://jsfiddle.net/mAUtk/1

Also on a side-note, your ids are not valid; they should not begin with a number. Here is a great post about how to create a valid id attribute in HTML: What are valid values for the id attribute in HTML?

You can just change the id attribute to data-id which is valid HTML5 code.

edited May 23 '17 at 10:34

Community

1
1

answered Dec 29 '11 at 21:04

Jasper

75,717
14
151
146

I know its not valid, but it's for a backend system so (at this point) i don't really care about validation (a) That's something for later – Maurice Dec 29 '11 at 21:31
@Maurice Just be careful because when you use generic IDs like that to store data you can run into accidently having duplicate Ids. Using `data-attributes` is good standard practice to get used to. – Jasper Dec 29 '11 at 21:32
I tested your code, but it's not what i'm looking for. I need to know the position of the id element in the table row. See http://jsfiddle.net/mAUtk/1/ I want to now which order element ID 5 gets when i place it one down (it should be 3 while it started at pos 2) – Maurice Dec 29 '11 at 21:43
@Maurice If I understand you properly then you want to add the index of the TR to the ID of the same TR, you can do that by just adding the index to the ID in the `for` loop: `out.push($TRs.eq(i).attr('id') + (1 + i)); `.Here is a demo: http://jsfiddle.net/mAUtk/2/. This seems strange though because this information is already intrinsically known based on the index of the ID in the output (`61|52|23|44`, if you use `6|5|2|4` then you know that the ID `2` is at the third index)... – Jasper Dec 29 '11 at 22:06
I guess am going nuts here, completely lost the logic! But, your solution works! Thanks in advance!! – Maurice Dec 29 '11 at 22:16

score 0 · Answer 2 · answered Dec 29 '11 at 20:58

0

childNodes of the <table> should give you an array of what you seek. Or .children(), however you prefer to traverse the DOM.

answered Dec 29 '11 at 20:58

Ken

548
6
19

You have to be careful because even if you code your table like this: `
` some browsers will add a `` as the parent element of the `` elements. So to target `` elements safely you should use `$('table').find('tr')` (not `.children()`) – Jasper Dec 29 '11 at 21:05
Good call, .find() would be more concise anyhow. – Ken Dec 29 '11 at 21:11

score 0 · Answer 3 · answered Dec 29 '11 at 21:05

Try this:

var t = "";
var tarr = []; // temp array
$("#eventTable tr").each(function(){ 
    t = this.attr("id") || ""; 
    tarr.push(t);
}); 
t = tarr.join("_");
window.location.href = $(this).attr("href")+"&sort="+t;

Now your new location will contain a query string variable sort which is equal to all the table row IDs, in order, separated by underscores.

Get row index after order change

3 Answers3