选中复选框时删除当前行(tr)
Remove current row (tr) when checkbox is checked
我正在尝试删除选中复选框的当前行(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()
相关文章:
- 如何在angularJS中编辑时,如果DB中的值为true,则设置复选框,如果值为false,则取消选中复选框
- 正在验证8个真/假复选框或复选框中的2个
- 为复选框javascript指定两个值
- 如何在单击复选框后调用控制器方法
- 从复选框和Selects-KnockoutJS中获取值的总和
- 选中多个具有相同名称的复选框
- 使用Jquery选择或取消选择ListView中的所有复选框
- Jquery表单验证插件-如果选中复选框,如何在提交时执行某些操作
- 使用$.ajax发布多个复选框
- AngularJS单选筛选不适用于Name、Description和Field4复选框值
- 使用jquery选中/取消选中单个复选框
- 通过 Jquery 调用 tr 属性并找到我的内部复选框
- 当不再有TR并且TABLE隐藏时,取消标记复选框
- 选中复选框时删除当前行(tr)
- 如果选中复选框,则复制TR元素并附加到外部源
- 如果我点击了一个复选框,试图阻止jQuery触发表tr onclick事件
- 在 TR 中选中和取消选中复选框的最佳方法
- 移动& lt; tr>根据复选框内是否包含
检查 - 基于多个CSS类和来自多个复选框的输入显示/隐藏tr元素
- 当单击淘汰表行中的复选框时,tr click事件将覆盖复选框状态更改