文档章节

【原创】表格前端新增和批量删除

柴高八斗之父
 柴高八斗之父
发布于 2017/09/01 19:57
字数 219
阅读 13
收藏 0

见图:

引用 

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />
		<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

JS 

$(function(){
				
				//全选与反选
				$(".table :checkbox:first").change(function(){
			      $(this).closest("table")
			             .find(":checkbox:not(:first)")
			             .prop("checked", this.checked);
			  	});
				
				//新增
				var num = 0;
				$("#btn-add").click(function(){
					num++
					$(
						'<tr>'+
							'<td><input type="checkbox" name="" id="" value="" /></td>'+
							'<td>'+num+'</td>'+
							'<td>汽车后服务市场的兴起</td>'+
							'<td>2017-09-09</td>'+
						'</tr>'
					).insertBefore(".tr-row")
					
				})
 //字符串拼接注意:
'<select class="form-control chosen" id="chooseGoodId'+num+'" name="chooseGoodId">'+
				
				//删除
				$("#btn-del").click(function(){
				
					var all_checked = $(".table tbody td input:checked");
					for(var i=0;i< all_checked.length;i++) 
					{ 
						all_checked.eq(i).parent().parent().remove();
					}
				})
			})

HTML

<div class="container">
			<div class="row">
				<div class="btn btn-primary" id="btn-add">
					新增
				</div>
				<div class="btn btn-danger" id="btn-del">
					批量删除
				</div>
				
			</div>
			<table class="table">
				<thead>
					<th><input type="checkbox" name="" id="" value="" /></th>
					<th>序</th>
					<th>标题</th>
					<th>时间</th>
				</thead>
				<tbody>
					<tr class="tr-row">
						<td colspan="4"></td>
					</tr>
				</tbody>
			</table>
		</div>

 

© 著作权归作者所有

共有 人打赏支持
柴高八斗之父
粉丝 4
博文 184
码字总数 102388
作品 0
宁波
前端工程师
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

日前,全球最大的控件提供商葡萄城宣布,SpreadJS 纯前端表格控件正式发布V11 版本。新版本亮点颇多,不但为用户带来期待已久的图表功能,还新增前端导出 PDF、列分组等功能,在数据可视化方...

葡萄城控件技术团队
2017/12/08
316
2
DWZ-RIA v1.2 RC1 发布

DWZ-RIA V1.2 RC1 1. 使用隐藏iframe来处理无刷新表单提交时,服务器端返回json格式和普通DWZ 普通ajax 表单提交保持一致(即validateCallback和iframeCallback服务器端返回json格式一致)。...

张慧华
2011/04/07
1K
2
帆软商业智能FineBI 4.0今日正式发布

2016年7月27日,帆软官方(www.finebi.com)对外宣称,将正式发布商业智能FineBI 4.0。 这次的新版发布,背后是帆软BI团队对产品孜孜不倦的钻研打磨,力争诠释FineBI在商业智能数据分析领域的...

玄学酱
05/21
0
0
SpreadJS纯前端表格控件V11.1震撼来袭

全球最大的控件提供商葡萄城宣布,纯前端表格控件SpreadJS 正式发布2018 V11.1 版本,新版本提供撤销/重做功能,并增强了UI和数据筛选,极大的扩展了产品的实用功能,可更加方便优雅的嵌入您...

powertoolsteam
06/26
0
0
DWZ-RIA v1.2 Final 发布

DWZ-RIA V1.2 Final 1. 使用隐藏iframe来处理无刷新表单提交时,服务器端返回json格式和普通DWZ 普通ajax 表单提交保持一致(即validateCallback和iframeCallback服务器端返回json格式一致)...

张慧华
2011/06/09
2.2K
8

没有更多内容

加载失败,请刷新页面

加载更多

20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
9
3
java -jar运行内存设置

java -Xms64m #JVM启动时的初始堆大小 -Xmx128m #最大堆大小 -Xmn64m #年轻代的大小,其余的空间是老年代 -XX:MaxMetaspaceSize=128m # -XX:CompressedClassSpaceSize=6...

李玉长
今天
4
0
Spring | 手把手教你SSM最优雅的整合方式

HEY 本节主要内容为:基于Spring从0到1搭建一个web工程,适合初学者,Java初级开发者。欢迎与我交流。 MODULE 新建一个Maven工程。 不论你是什么工具,选这个就可以了,然后next,直至finis...

冯文议
今天
2
0
RxJS的另外四种实现方式(四)——性能最高的库(续)

接上一篇RxJS的另外四种实现方式(三)——性能最高的库 上一篇文章我展示了这个最高性能库的实现方法。下面我介绍一下这个性能提升的秘密。 首先,为了弄清楚Most库究竟为何如此快,我必须借...

一个灰
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部