如何将选中的复选框附加到html表中的列表顶部？

用户名

我在表格及其相关数据中有一些HTML复选框列表。在列表中，如果我选择了一个复选框，该复选框将移至列表顶部。
下面是我的代码，它可以在中工作，<div>但不能在中工作<table>。

jQuery(function($) {
  $('.t1 .group-title').each(function() {
    $if(this.checked) {
      $item.insertBefore($('.t1 .group-title').first())
    } else {
      $item.appendTo($item.data('group'))
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="t1">
  <thead>
    <th></th>
    <th>Check</th>
    <th>ID</th>
    <th>Title</th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>
        <input type="checkbox" id="chk1" name="chk1">
      </td>
      <td>1</td>
      <td>Title 1</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk2" name="chk2">
      </td>
      <td>2</td>
      <td>Title 2</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk3" name="chk3">
      </td>
      <td>3</td>
      <td>Title 3</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk4" name="chk4">
      </td>
      <td>4</td>
      <td>Title 4</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox" id="chk5" name="chk5">
      </td>
      <td>5</td>
      <td>Title 5</td>
    </tr>
  </tbody>
</table>

用户名

试试这个代码。

$('table').on('change', '[type=checkbox]', function() {
  var $this = $(this);
  var row = $this.closest('tr');
  if ($this.prop('checked')) { // move to top
    row.insertBefore(row.parent().find('tr:first-child'))
      .find('label').html('move to bottom');
  } else { // move to bottom
    row.insertAfter(row.parent().find('tr:last-child'))
      .find('label').html('move to top');
  }
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。