CODEWITHSUNDEEP
javascriptjqueryhtmlsortinghtml-table
Matarishvan
Matarishvan

Reputation: 2422

Sort table rows based on background-color using jquery

This is my FIDDLE

<table>
    <tr>
        <td>
            <div style="background:blue;color:white">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:pink;color:white">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:blue;color:white">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:green;color:white">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:pink;color:white">hello</div>
        </td>
    </tr>
     <tr>
        <td>
            <div style="background:green;color:white">hello</div>
        </td>
    </tr>
</table>

How do i rearrange the html table rows based on color? I want to group html table rows based on the background color of the rows.

Upvotes: 2

Views: 1914

Answers (3)

Muhammad Bilawal
Muhammad Bilawal

Reputation: 474

I reviewed your question, I think you want to differentiate each tr by there color, adding html, style and script for you here.

Here is the Html

 <table>
     </tbody>
        <tr><td>123</td></tr>
        <tr><td>123</td></tr>
        <tr><td>123</td></tr>
        <tr><td>123</td></tr>
        <tr><td>123</td></tr>
     </table>

Do add this script, by this function all your tr will have unique classes. you can add there background colors etc style on the base of class

 <script>
 // please do add jQuery file to prevent error
 function adddClass() {
      for(i=1; i<=6; i++) {
          alert("");
          jQuery('table tr:nth-child('+ i +')').addClass("color"+i);
      }
  }
  adddClass();
  </script>

Here is the style for background color of each table row tr 

<style>
.color1{background-color:orange;}
.color2{background-color:teal;}
.color3{background-color:red;}
.color4{background-color:#717171;}
.color5{background-color:khaki;}
.color6{background-color:lightgray;}
tr, table, body{width:100%;}
</style>

Hope this will help, Thanks.!

Upvotes: 2

Mohammad
Mohammad

Reputation: 21489

Use sort() to sorting array of tr elements. You can get backgroud-color of element in function of sort and set arrangement of every element.

$("table tr").sort(function (a, b){
    return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;    
}).appendTo('table');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <div style="background:blue">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:pink">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:blue">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:green">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:pink">hello</div>
        </td>
    </tr>
    <tr>
        <td>
            <div style="background:green">hello</div>
        </td>
    </tr>
</table>

Upvotes: 4

chandan kharbanda
chandan kharbanda

Reputation: 199

You can easily do it in javascript.

  1. Initiate an empty js object like this var colorRowmap = {}
  2. Loop through all elements(tr elements) of table and get colorName from each tr. And if that color does not exist as a key of colorRowMap object do colorRowMap[colorName] = [currentTableRow] else do colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
  3. Empty the table.
  4. Loop through all keys of colorRowMap and push the tr roows to table.

Done. :)

Upvotes: 0

Related Questions