选中复选框时删除当前行(tr)

Remove current row (tr) when checkbox is checked

本文关键字:tr 复选框 删除      更新时间:2023-09-26

我正在尝试删除选中复选框的当前行(tr元素)。我正在研究这个代码:

$('#btnEliminar').on('click', function () {
    var $my_checkbox = $('#toggleCheckbox');
    var $all_checkboxes = $my_checkbox.closest('tbody').find('input[type=checkbox]');
    $all_checkboxes.each(function () {
        if ($(this).prop('checked')) {
            // here should remove the current tr
            return false;
        }
    });
});

但我不知道如何从这里开始,我被卡住了,因为不知道如何删除标记的行。考虑到#toggleCheckbox将切换所有,但也可以逐个选择。我能得到一些帮助吗?

这是HTML代码:

<table id="tablaNorma" class="table">
    <thead>
        <tr>
            <th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
            <th>Nro.</th>
            <th>Norma</th>
            <th>Año</th>
            <th>Comité</th>
        </tr>
    </thead>
    <tbody id="normaBody">
        <tr class="">
            <td>
                <input type="checkbox" value="1">
            </td>
            <td>814002983</td>
            <td>Harum.</td>
            <td>1979</td>
            <td>Non asperiores.</td>
        </tr>
        <tr class="">
        <td>
            <input type="checkbox" value="2">
            </td>
            <td>90234555</td>
            <td>Ea in sequi.</td>
            <td>1994</td>
            <td>Ad modi ea in.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="3">
            </td>
            <td>29</td>
            <td>Eos tempore.</td>
            <td>1970</td>
            <td>Eaque error.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="4">
            </td>
            <td>93</td>
            <td>Earum ut.</td>
            <td>2014</td>
            <td>Earum ut.</td>
        </tr>
    </tbody>
</table>

简单如下:

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked").closest("tr").remove();
});

编辑:Exept标头。

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
});

编辑:

根据您的需要。

$('#btnEliminar').on('click', function () {
    $("#tablaNorma input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
    if($("#tablaNorma tbody tr").length == 0)
    {
        // do something, like hide table
        $("#tablaNorma").hide();
    }
});

编辑:

将选择器传递给函数。做完全相同的事情,但我们将选择器作为参数传递。

$('#btnEliminar').on('click', function () {
    DoSomething("#tablaNorma"); 
});
function DoSomething(selector)
{
    $(selector + " input[type='checkbox']:checked:not('.toggleCheckbox')").closest("tr").remove();
}

你必须这样做:

$(function () {
$("#delete").click(function () {
    $("#tablaNorma tbody tr").each(function () {
        if ($(this).find("input:checkbox:checked").length > 0) $(this).remove();
    })
})
$(".toggleCheckbox").change(function(){
   $("#tablaNorma tbody tr").find("input:checkbox").prop("checked",this.checked);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table id="tablaNorma" class="table">
    <thead>
        <tr>
            <th><input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox"></th>
            <th>Nro.</th>
            <th>Norma</th>
            <th>Año</th>
            <th>Comité</th>
        </tr>
    </thead>
    <tbody id="normaBody">
        <tr class="">
            <td>
                <input type="checkbox" value="1">
            </td>
            <td>814002983</td>
            <td>Harum.</td>
            <td>1979</td>
            <td>Non asperiores.</td>
        </tr>
        <tr class="">
        <td>
            <input type="checkbox" value="2">
            </td>
            <td>90234555</td>
            <td>Ea in sequi.</td>
            <td>1994</td>
            <td>Ad modi ea in.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="3">
            </td>
            <td>29</td>
            <td>Eos tempore.</td>
            <td>1970</td>
            <td>Eaque error.</td>
        </tr>
        <tr class="">
            <td>
            <input type="checkbox" value="4">
            </td>
            <td>93</td>
            <td>Earum ut.</td>
            <td>2014</td>
            <td>Earum ut.</td>
        </tr>
    </tbody>
</table>
<input type="button" id="delete"/>

由于您使用的是jQuery,因此可以使用.remove方法:

$('#btnEliminar').on('click', function () {
    // use the table's id to find checkboxes in tbody
    var $all_checkboxes = $('#tablaNorma>tbody').find('input[type=checkbox]');
    $all_checkboxes.each(function () {
        if ($(this).prop('checked')) {
            // find the tr and remove
            $(this).closest('tr').remove();
            return false;
        }
    });
});

虽然您已经接受了答案,但我个人建议采用以下方法(将隐式系统连接在一起):

// binding a change event-handler to the toggleCheckbox:
$('#toggleCheckbox').on('change', function () {
  var toggle = this;
  // find the closest table:
  $(this).closest('table')
  // find the checkboxes within the tbody:
  .find('tbody input[type="checkbox"]')
  // set the 'checked' property of those checkboxes according
  // to the checked state of the toggleCheckbox:
  .prop('checked', toggle.checked);
});
// binding the change event-handler to the tbody:
$('tbody').on('change', function () {
  // getting all the checkboxes within the tbody:
  var all = $('tbody input[type="checkbox"]'),
  // getting only the checked checkboxes from that collection:
      checked = all.filter(':checked');
  // setting the checked property of toggleCheckbox to true, or false
  // according to whether the number of checkboxes is greater than 0;
  // if it is, we use the assessment to determine true/false,
  // otherwise we set it to false (if there are no checkboxes):
  $('#toggleCheckbox').prop('checked', all.length > 0 ? all.length === checked.length : false);
});
// binding the click event-handler:
$('#btnEliminar').on('click', function () {
  // finding the checked checkboxes in the tbody:
  $('#tablaNorma tbody input[type="checkbox"]:checked')
  // finding the closest tr elements:
  .closest('tr')
  // removing them:
  .remove();
  // triggering the 'change' event on the tbody (to call the change
  // event-handler to set the toggleCheckbox appropriately):
  $('#tablaNorma tbody').change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnEliminar">Remove rows</button>
<table id="tablaNorma" class="table">
  <thead>
    <tr>
      <th>
        <input type="checkbox" name="toggleCheckbox" class="toggleCheckbox" id="toggleCheckbox">
      </th>
      <th>Nro.</th>
      <th>Norma</th>
      <th>Año</th>
      <th>Comité</th>
    </tr>
  </thead>
  <tbody id="normaBody">
    <tr class="">
      <td>
        <input type="checkbox" value="1">
      </td>
      <td>814002983</td>
      <td>Harum.</td>
      <td>1979</td>
      <td>Non asperiores.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="2">
      </td>
      <td>90234555</td>
      <td>Ea in sequi.</td>
      <td>1994</td>
      <td>Ad modi ea in.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="3">
      </td>
      <td>29</td>
      <td>Eos tempore.</td>
      <td>1970</td>
      <td>Eaque error.</td>
    </tr>
    <tr class="">
      <td>
        <input type="checkbox" value="4">
      </td>
      <td>93</td>
      <td>Earum ut.</td>
      <td>2014</td>
      <td>Earum ut.</td>
    </tr>
  </tbody>
</table>

参考文献:

  • closest()
  • filter()
  • find()
  • on()
  • prop()
  • remove()