按照勾选 删除表格的行<tr>

需求描述:有一个产品列表,有一个删减按钮,点击删减按钮,按照产品勾选的行,删除产品列表中对应的行数据

代码:

//html代码
<table id="table1">
<tr th:each="prod : ${list}" th:id="${prod.productId}">
<td>
<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline" name="lb">
<input type="checkbox" class="checkboxes" th:value="${prod.productId}" name="ckProdId"/>
</label>
</td>
<td th:text="${prod.productName}">产品名</td>
</tr>
</table>

//js代码 $("#toCutProd").click("click", function () {
$("input.checkboxes[name='ckProdId']:checkbox").each(function() {
if ($(this).is(":checked")) {
var s= $(this).val();
$('#table1').DataTable().row('#' + s).remove().draw();
ableMany=true;
}
});
});
//这种删除是操作datatable的dom来删除
//ableMany=true 是允许多行的意思
//js代码
$('table input:checked').parents('tr').remove();//这一行就可以搞定

$("input[name='ck']:checked").parent().parent().remove(); //这一行也可以搞定

总结:点滴积累,不断进步

原文地址:https://www.cnblogs.com/xuchao0506/p/9766559.html