jquery - Sort table rows based on their Class Names

Question

I want to rearrange table rows based on their Class names.
Below is my HTML code.

<table>
 <tr class="a4"><td>4</td></tr>
 <tr class="a6"><td>6</td></tr>
 <tr class="a1"><td>1</td></tr>
 <tr class="a2"><td>2</td></tr>
 <tr class="a5"><td>5</td></tr>
 <tr class="a3"><td>3</td></tr>
</table>

So now, with class name a1 should display first, likewise a2 second.. etc..

Please someone help me

Answer 1

If you don't want to rely on an external plugin, you can extract the numbers from the class names using match() and sort the elements using the built-in sort() method.

From there, you can use append() to reorder the table rows (it will remove each row from the table then re-add it at the proper position):

$("table").append($("tr").get().sort(function(a, b) {
    return parseInt($(a).attr("class").match(/d+/), 10)
         - parseInt($(b).attr("class").match(/d+/), 10);
}));

You can see the results in this fiddle.