CODEWITHSUNDEEP
jquery
Reddy
Reddy

Reputation: 1385

Problem in rearranging table rows

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.

Upvotes: 0

Views: 77

Answers (3)

Shef
Shef

Reputation: 45589

$("tr td table").each(function(){
    var $this = $(this);
    $this.append($this.find("tr").get().sort(function(a, b) {
        return parseInt($(a).attr("class").match(/\d+/))
             - parseInt($(b).attr("class").match(/\d+/))
    }));
});

Adjusted to your need, based on the accepted answer for the question Sort table rows based on their Class Names.

Upvotes: 0

Sheik Yerbouti
Sheik Yerbouti

Reputation: 1044

I am not going to write your code for you as I do not know what language you wish to do this in, but what you want to achieve can be done with a few basic steps.

I am unsure whether or not you want to do this as the page loads (in which case you should use javascript) or whether you want to edit the HTML using a script to permanently fix your HTML file. I assume you wish to do this in an offline script using something like python.

The steps you should use to do this are.

  1. Parse the html into a document object.
  2. Find and loop through each table object.
  3. For each table pull out each tr element into an array.
  4. Pull out the class attribute and do some string manipulation and casting to turn into a number.
  5. Sort the tr objects based on the number you have pulled out.
  6. Remove all the tr objects from the table then add them back in based on your sorted array.

I assume this is some kind of homework assignment so I won't write the code for you, but if you approach the task based on the above steps it should not take you long.

Hope this helps,

Upvotes: 0

Mo Valipour
Mo Valipour

Reputation: 13496

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/

Upvotes: 3

Related Questions