使用jQuery根據背景顏色對表行進行排序

Question

這是我的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>

如何根據顏色重新排列html表行？ 我想基於行的背景顏色對html表行進行分組。

Answer 1

使用sort()對tr元素數組進行排序。 您可以通過排序和設置每個元素的排列功能來獲取元素的backgroud-color 。

 $("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

我查看了您的問題，我想您希望通過顏色來區分每個tr，在這里為您添加html，樣式和腳本。

這是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>

請添加此腳本，通過此功能，您所有的tr都將具有唯一的類。 您可以在課堂的基礎上添加背景顏色等樣式

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

這是每個表格行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>

希望這會有所幫助，謝謝！

Answer 3

您可以在javascript中輕松完成此操作。

1. 啟動一個空的js對象，例如var colorRowmap = {}
2. 循環遍歷表的所有元素（tr元素）並從每個tr中獲取colorName。 如果該顏色不作為colorRowMap對象的鍵存在，則執行colorRowMap[colorName] = [currentTableRow]否則執行colorRowMap[colorName] = colorRowMap[colorName].push(currentTableRow)
3. 清空桌子。
4. 循環遍歷colorRowMap的所有鍵，並將行推到表中。

完成。 :)