按照勾选 删除表格的行<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(); //这一行也可以搞定
总结:点滴积累,不断进步
按照勾选 删除表格的行<tr>的更多相关文章
- sencha gridpanel checkbox 复选框的勾选 以及和单机行冲突
gridpanel显示checkbox: 添加SelectionModel为Checkbox Selection Model { xtype: 'gridpanel', id: 'Grid1', he ...
- ASPxGridView 选中主表一行数据,从表自动选中(勾选)对应的行
一.图解 下图为效果图,点击 [A表]种的某一行,[B表]会有与之相对于一行会被自动选中并且勾选上: 二.Html 代码 <html xmlns="http://www.w3.org/ ...
- js实现动态删除表格的行或者列-------Day57
昨天记录了动态加入表格的一行,当然这个一行是指一行数据,也就是说一行多少列也是加上的,而且第几列的内容都能够加入上,先来回想下它的实现的关键点: 1.var row=table.insertRow() ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- Jquery 表格操作,记录分页情况下,每一页中被用户勾选的信息
如下图,一个分页列表,用户可以随意勾选一条或多条信息,然后进行某种操作,如“提交”.但是有个问题:如果勾选了一条信息之后,点[下一页],那么上一页 勾选的条目被刷新掉了. 问题:如果用户需要在第1页, ...
- 【JavaScript】checkBox的多选行<tr>信息获取
页面的列表table显示(后台model.addAttribute("page", page);传来page信息,page通过foreach标签迭代展示表格数据): <!-- ...
- JQuery实现表格的全选和反选,以及分页勾选保存(laypage插件分页的使用)
需求: 1.全选与取消全选 2.单个勾选,点击表格单元格中checkbox勾选,也可以在点击行勾选,便与用户操作 3.分页勾选保存 4.固定表头 功能一: 说明:操作全选按钮的同时,遍历每一个tr中的 ...
- JQuery Easyui/TopJUI表格基本的删除功能(删除当前行和多选删除)
需求:数据表格datagrid实现删除当前行和多选删除的功能. html <a href="javascript:void(0)" data-toggle="top ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
随机推荐
- java 基础 字符类型
1.char类型的字面量可以是一个英文字母.字符或一个汉字,并且由单引号包括. 2.Java底层使用一个16位的整数来处理字符类型,该数值是一个字符的unicode编码值. unicode: 1.un ...
- 下载最新的glibc库并临时使用,而不污染原有系统环境
以下参考了文中提到的博文,那篇博文其中有他安装时报错的内容,以及如何解决的,特别是报错2,值得学习借鉴 另外升级glibc,这篇文章有补充https://blog.csdn.net/fzuzhangh ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class,id,type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- python - 中文编码/ASCII
Python 中文编码 为了处理汉字,程序员设计了用于简体中文的GB2312和用于繁体中文的big5. GB2312(1980年)一共收录了7445个字符,包括6763个汉子和682个其他符号. ...
- MySql cmd下的学习笔记 —— 有关分组的操作(group by)
(一) 把建立的goods表找到 (二) 当cat_id = 3时,计算所有商品的库存量之和 计算每个cat_id下的库存量(group by) 需要用到分组,把每个红框内的计算在一起 筛选出本店价比 ...
- 用Vue实现状态列表的操作涵盖所有的知识点
用Vue实现状态列表的操作涵盖所有的知识点
- Palindrome Number & Reverse Integer
Determine whether an integer is a palindrome. Do this without extra space. 分析:把一个数倒过来,然后看两个数是否相同. pu ...
- python3+selenium框架设计01-Page Object
页面对象模型Page Object Modal是一种脚本设计模型,将页面元素,业务操作分割,当实际页面发生变化的时候,只需要修改页面元素文件,业务操作不需要修改. 具体实现需要先写一个页面公共类,里面 ...
- windows的tasklist使用
获取进程信息 tasklist # tasklist |findstr java.exe 杀死进程 方式1,通过进行pid杀死: taskkill /pid 4612 /f 方式2,通过名称杀死: t ...
- Android App签名打包
Andriod应用程序如果要在手机或模拟器上安装,必须要有签名! 1.签名的意义 为了保证每个应用程序开发商合法ID,防止部分开放商可能通过使用相同的Package Name来混淆替换已经安装的程序 ...