javascript - Sort table rows based on background-color using jquery -

this 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 rearrange html table rows based on color? want group html table rows based on background color of rows.

use sort() sorting array of tr elements. can backgroud-color of element in function of sort , 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>