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!

Answer 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.