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

代码:

//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(); //这一行也可以搞定

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

按照勾选 删除表格的行<tr>的更多相关文章

  1. sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突

    gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...

  2. ASPxGridView 选中主表一行数据,从表自动选中(勾选)对应的行

    一.图解 下图为效果图,点击 [A表]种的某一行,[B表]会有与之相对于一行会被自动选中并且勾选上: 二.Html 代码 <html xmlns="http://www.w3.org/ ...

  3. js实现动态删除表格的行或者列-------Day57

    昨天记录了动态加入表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,而且第几列的内容都能够加入上,先来回想下它的实现的关键点: 1.var row=table.insertRow() ...

  4. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  5. Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息

    如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...

  6. 【JavaScript】checkBox的多选行<tr>信息获取

    页面的列表table显示(后台model.addAttribute("page", page);传来page信息,page通过foreach标签迭代展示表格数据): <!-- ...

  7. JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)

    需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...

  8. JQuery Easyui/TopJUI表格基本的删除功能(删除当前行和多选删除)

    需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...

  9. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

随机推荐

  1. CentOS7查询最近修改的文件

    当需要排查问题的时候,经常需要找到最近修改和产生的文件 下面的命令是查询当前目录下以log结尾的日志,并且在30分钟内修改过,这个可以根据情况修改时间为1分钟,查找最新产生的日志 突然想到这个问题,是 ...

  2. Windows IIS 使用批处理脚本自动安装与卸载

    IIS6:适用于win server 2003 :: ******************* :: * 安装 :: ******************* :Install Cls @echo. &a ...

  3. 数据库并发控制及SQL Server的并发控制机制

    在多用户和网络环境下,数据库是一个共享资源,多个用户或应用程序同时对数据库的同一数据对象进行读写操作,这种现象称为对数据库的并发操作.显然并发操作可以充分利用系统资源,提高系统效率.虽然如此,但是如果 ...

  4. s9.16作业,员工信息表

    转载https://blog.csdn.net/qq_35883464/article/details/83151464 实现员工信息表文件存储格式如下:id,name,age,phone,job1, ...

  5. Spring重温(四)--Spring自动组件扫描

    通常情况下,声明所有的Bean类或组件的XML bean配置文件,这样Spring容器可以检测并注册Bean类或组件. 其实,Spring是能够自动扫描,检测和预定义的项目包并实例化bean,不再有繁 ...

  6. protobuf 安装与卸载

    方法一:可以FQ 安装 下载https://github.com/google/protobuf/releases ##Source code (zip)## ./autogen.sh ./confi ...

  7. git与eclipse集成之文件回退

    1.1. 文件回退 1.1.1.        添加或修改文件回退,选择要回退的文件,右键Overwrite 1.1.2.        删除文件回退 选择要回退的文件,右键Overwrite 文件变 ...

  8. httplib urllib urllib2 pycurl 比较

    最近网上面试看到了有关这方面的问题,由于近两个月这些库或多或少都用过,现在根据自己的经验和网上介绍来总结一下. httplib 实现了HTTP和HTTPS的客户端协议,一般不直接使用,在python更 ...

  9. 弹出框sweetalert插件的简单使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 使用python脚本批量删除阿里云oss中的mp4文件

    #encoding:utf-8 ''' oss中有一些mp4文件需要删除,首先定位出这些文件放在txt文本中 然后通过python操作oss进行批量删除 ''' import oss2 auth = ...