javascript - 首先在选中复选框的情况下显示表中的行

Question

我的表格每行都显示有复选框，如下所示 -

HTML 代码: -

<table>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name1</td>
        <td>Role1</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name2</td>
        <td>Role2</td>
     </tr>

     <tr>
        <td><input type= "checkbox"></td>
        <td>Name4</td>
        <td>Role4</td>
     </tr>
     <tr>
        <td><input type= "checkbox"></td>
        <td>Name3</td>
        <td>Role3</td>
     </tr>
</table>

我还有一个“排序”按钮。当我单击按钮排序时，所有具有选中复选框的行都应首先显示，然后显示所有其他行。结果看起来像这样 -

如何实现？

Answer 1

使用jquery你可以解析每个<tr>并检查其子复选框是否已选中，然后将它们作为第一个或最后一个子添加到新表中。然后用新表替换旧表。

$(document).ready(function(){
    $('#sort').on('click', function(){
        var newTable = $('<table class="table"></table>');
         $('.table').find('tr').each(function($index, $value){
            if($(this).find('input[type=checkbox]').is(':checked')){
                newTable.prepend($(this));
            } else {
                newTable.append($(this));
            } 
         });
         $('.table').replaceWith(newTable);
    });
});

这应该可行，但我还没有测试过。希望有帮助!

• 尼克