Move table rows with jQuery

Question

I have this code:

<table>
 <tr id="a"><td>A</td></tr>
 <tr id="d"><td>D</td></tr>
 <tr id="e"><td>E</td></tr>
 <tr id="b"><td>B</td></tr>
 <tr id="c"><td>C</td></tr>
</table>

How with jQuery can I put the rows in order?

Update: I need to use a move function not a sort function, since the real id's are not letters. Sorry for the confusion. I want to do something like this:

$("#a").after(rows_b_and_c)

But I don't know how to get the rows.

Asked here: http://stackoverflow.com/questions/3160277/jquery-table-sort — mqsoh, Oct 14 '11 at 00:54
Nice plug-in, but too much for the problem here. I expect this can be solved with few lines of code. — Memochipan, Oct 14 '11 at 00:56

Reigel Gallarde · Accepted Answer · 2011-10-14T03:41:27.813

2

if you have no events attached to <td>s and contents are just text, this will do:

var tds = $('table tr').sort(function(a,b){
    return $('td:eq(0)',a).text() > $('td:eq(0)',b).text();
});
$('table').html(tds);

jsfiddle demo

that depends... how would you order it? please be more specific.

will to give you a hint, you might wanna check out:

.after() Insert content, specified by the parameter, after each element in the set of matched elements.

.before() Insert content, specified by the parameter, before each element in the set of matched elements.

.insertAfter() Insert every element in the set of matched elements after the target.

.insertBefore() Insert every element in the set of matched elements before the target.

you're funny. :p

you said you know those functions then you did not get to solve the problem.

anyway, here are some of the ways to do it: http://jsfiddle.net/reigel/7Pb6a/1/

edited Oct 14 '11 at 03:41

answered Oct 14 '11 at 01:01

Reigel Gallarde

64,198
21
121
139

Smart solution @Reigel, but I used the letters only as example, the real ids are random text and the objective is to move the rows, no to sort them. – Memochipan Oct 14 '11 at 01:10
move rows when you click them? sorry if I misunderstood your question. – Reigel Gallarde Oct 14 '11 at 01:13
I receive the output of an inflexive php code that displays the rows in an incorrect order, I want to re-order them using jQuery. – Memochipan Oct 14 '11 at 01:18
I know those functions, but I don't know how to get the rows to put `$("#a").after(rows)` – Memochipan Oct 14 '11 at 01:53
Hahaha, You're right @Reigel, I was confused. English is not my language and I didn't understand the difference between after and insertAfter. Somewhere I read that .html() doesn't get the tags of the element, so I couldn't use it to pass data to .after(). Thanks for understand me and have patience! :) – Memochipan Oct 14 '11 at 12:00

score 1 · Answer 2 · answered Oct 14 '11 at 01:09

1

Cleaner:

var sortID = function(a,b){
    return a.id > b.id ? 1 : -1;
};
$('table tr').sort(sortID).appendTo('table');

answered Oct 14 '11 at 01:09

N Rohler

4,595
24
20

if you're basing on it's id, I bet that won't do much. ;) – Reigel Gallarde Oct 14 '11 at 01:14
hmmmm... with that latest edit on the question, I have no idea what is being asked ;) – N Rohler Oct 14 '11 at 01:20

Move table rows with jQuery

2 Answers2