Question

我在表格中列出了一些HTML复选框及其相关数据。如果我选中了一个将移动到列表顶部的复选框，则在列表中以下是我在<div>中使用的代码，但不在<table>。

中

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

您应该将change事件绑定到复选框元素。然后基于checked州prepend() / append()父tr元素。

$('#t1 :checkbox').on('change', function() {
    var tr = $(this).closest('tr');
    var tbody = $('#t1 tbody')
    if (this.checked) {
        tbody.prepend(tr)
    } else {
        tbody.append(tr)
    }
});

＆＃13;

jQuery(function($) {
  $('#t1 :checkbox').on('change', function() {
    var tr = $(this).closest('tr');
    var tbody = $('#t1 tbody')
    if (this.checked) {
      tbody.prepend(tr)
    } else {
      tbody.append(tr)
    }
  });
});

＆＃13;

<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>
        <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>

＆＃13;

Answer 2

首先，您必须在复选框中处理更改事件，然后如果选中该复选框，则应将tr父级添加到表的tbody中。

$("#t1 input:checkbox").on("change",function(){
  if(this.checked){
    $("#t1 tbody").prepend($(this).parents("tr"))
  }else{
    $("#t1 tbody").append($(this).parents("tr"))
  }
})

这是你的例子工作的小提琴 https://jsfiddle.net/kLhxq3Lj/

Answer 3

试试这段代码。

$('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');
  }
});

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

3 个答案: