Sorting table rows according to an array with jquery?

Question

I have a table that looks something like this:

<table>
      <tr id="1">
          <td>bla</td>
      </tr>

      <tr id="2">
          <td>bla</td>
      </tr>

       <tr id="3">
          <td>bla</td>
      </tr>

      <tr id="4">
          <td>bla</td>
      </tr>
</table>

I also got an array according to which I should sort this table rows, say array goes something like

array= [3, 4, 1, 2];

Any tips or ideas how I can rearrange rows with jquery/javascript to match the array?

possible duplicate: JQuery/Javascript Reordering rows

Andreas
– Andreas

2012-09-02 22:40:22 +00:00
Commented Sep 2, 2012 at 22:40 — Andreas
– Andreas, Commented Sep 2, 2012 at 22:40

Matt Zeunert · Accepted Answer · 2012-09-02 22:44:27Z

5

Append them again, in the order you need them to be in. When you call .append and the element is already visible it will be removed from its current location.

var order = [3,2,1,4];

$.each(order, function(){
  $("table").append($("#" + this));
})

http://jsfiddle.net/nZ6HJ/

answered Sep 2, 2012 at 22:44

Matt Zeunert

16.6k7 gold badges56 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Fabrício Matté Over a year ago

By far the simplest and most effective solution (assuming all row IDs are in the array). Using $.each to iterate a simple array is slightly overkill though, I'd use a simple for loop if performance is a concern.

Tomalak Over a year ago

@FabrícioMatté Define "by far". Also, if re-ordering HTML table rows is the task, array loop performance is not the concern.

Fabrício Matté Over a year ago

@Tomalak Sorry, I guess I didn't pay enough attention when reading your answer. But I'll defend my performance statement, just because you're carrying 10 elephants on your back doesn't mean that you have to carry 1 more unnecessarily - they will add up with time as your application grows. And I find a for loop more readable and it doesn't a create a closure unnecessarily either.

Tomalak Over a year ago

@FabrícioMatté No, my answer was actually wrong, that's why I deleted it. Regarding your analogy: If reordering table rows is 10 elephants, the $.each() is an ant. You won't gain any performance to speak of from not using it.

Fabrício Matté Over a year ago

@Tomalak oh thanks for the jsperf =] Yeah, sometimes I have to remember that premature optimization is the root of all evil.

|

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

jsBin demo

for(i=0; i<array.length; i++){
  $('#'+array[i]).appendTo('table');
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 2, 2012 at 22:45

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

Sorting table rows according to an array with jquery?

2 Answers 2

11 Comments

jsBin demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related