使用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的所有键，并将行推到表中。

完成。 :)