使用jQuery根据背景颜色对表行进行排序

Question

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.

Answer 1

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> 

Answer 2

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.!

Answer 3

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. :)