首先使用选中的复选框

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>

我还有一个按钮＆＃39;排序＆＃39;。当我单击按钮排序时，应首先显示所有选中复选框的行，并在其后显示所有其他行。结果看起来像这样 -

如何实施？

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);
    });
});

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

• 尼克

Answer 2

请试试这个

$('input').each(function(e,i){
 if(!i.checked){
   var tr=$(i).closest('tr');
     $(tr).parent().append($(tr).remove());
    }
 });

Answer 3

您可以使用sort()和is(':checked')对行进行排序，然后清空表格并附加已排序的内容。 DEMO

var sorted = $('table tr').sort(function(a, b) {
  if($(b).find('td:first-child input').is(':checked')) {
    return 1;
  } else {
    return -1;
  }
})

$('button').click(function() {
  $('table').empty().html(sorted);
})