使用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()对Task元素数组进行排序。你可以在排序函数中获得tr元素，并设置每个元素的排列。

＆＃13;

＆＃13;

backgroud-color

＆＃13;

$("table tr").sort(function (a, b){
    return $("div", b).css("background") < $("div", a).css("background") ? 1 : -1;    
}).appendTo('table');

＆＃13;

＆＃13;

＆＃13;

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的所有键并将tr roows推送到表格。

完成。 ：）