javascript - 使用 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>