Question

I need to display rows which are having a1 in first row and a2 in second row etc..
below is my HTML code

 <table>
  <tr>
    <td>
         <table>
                <tr class="a4"><td>4</td></tr>
                <tr class="a6"><td>6</td></tr>
                <tr class="a2"><td>2</td></tr>
                <tr class="a5"><td>5</td></tr>
                <tr class="a3"><td>3</td></tr>
         </table>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
            <td>
         <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>
    </td>
</tr>
</table>   

Please someone help me How can i achieve it.

Answer 1

You need to use sort plugin presented here: http://james.padolsey.com/javascript/sorting-elements-with-jquery/

you need to give your main table an ID and sort your trs like this:

$(function()
  {
      $('#mainTable table').each(sortTrs);
  });

function sortTrs(index, parent)
{
    $(parent).find("tr").sortElements(function(a, b){
            return $(a).attr("class") > $(b).attr("class") ? 1 : -1;
        });
}

see what I tried and worked in jsFiddle: http://jsfiddle.net/y9mrF/7/