Get row index after order change
<p>I have a html table that looks something like this</p>

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

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

<p>I use the following functions to change the row order</p>

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

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

<p>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</p>

<pre><code>
  $("#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;
  });
</code></pre>

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

<p><strong>EDIT:</strong></p>

<p>I tried Jasper's solution, but it's not fully (but a nice half ;)) what im looking for. See my example above, the <code>id attributes</code> 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.</p>

<p>So at the start, my output coding would be</p>

<pre><code>61|52|23|44
id 6 == row 1
id 5 == row 2
id 2 == row 3
id 4 == row 4</code></pre>

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

<pre><code>
61|22|53|44
id 6 == row 1
id 2 == row 2
id 5 == row 3
id 4 == row 4
</code></pre>

<p>Hope this made it clear :)</p>

<p>Thanks for the help!</p>
