使用jquery基于列类名对表行进行排序

时间:2016-07-13 13:02:19

标签: javascript jquery html sorting html-table

非常类似于这个问题:Sort table rows based on their Class Names
请考虑下表:

<table>
   <thead>
       <th>A column</th>
   </thead>
   <tbody>
       <tr>
           <td class="x">A</td>
       </tr>
       <tr>
           <td class="c">B</td>
       </tr>
       <tr>
           <td class="">C</td>
       </tr>
   </tbody>
</table>

我想根据第一个(在这种情况下只有)列类名对行进行排序。有些td没有指定类。因此,期望的效果将是:A-B-C -> C-B-A or B-A-C(我不关心无类别的tds所在的位置)。我知道我可以用jquery上课,例如:

$(table tr).eq(1).find('td').eq(0).attr('class')

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

使用sort()tr元素数组进行排序。你可以在排序函数中获得元素类,并设置每个元素的排列。

&#13;
&#13;
$("table tbody tr").sort(function (a, b){
    return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;    
}).appendTo('table tbody');
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <th>A column</th>
    </thead>
    <tbody>
        <tr>
            <td class="x">A</td>
        </tr>
        <tr>
            <td class="c">B</td>
        </tr>
        <tr>
            <td class="">C</td>
        </tr>
    </tbody>
</table>
&#13;
&#13;
&#13;