文档章节

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

柴高八斗之父
 柴高八斗之父
发布于 2017/09/01 19:57
字数 219
阅读 14
收藏 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
博文 193
码字总数 107539
作品 0
宁波
前端工程师
私信 提问
SSM+maven实现答题管理系统(二)

好的,现在我们来实现删除模板(model表删除记录)的功能,删除功能不难做,主要我们这次实现的是批量删除功能。 一.思路整理 首先我们删除模板是根据模板的id来删除的,不管是单项删除还是批量...

若花亦晨曦
09/19
0
0
DWZ-RIA v1.2 RC1 发布

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

张慧华
2011/04/07
1K
2
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

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

葡萄城技术团队
2017/12/08
593
2
DWZ-RIA v1.2 Final 发布

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

张慧华
2011/06/09
2.2K
8
帆软商业智能FineBI 4.0今日正式发布

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

玄学酱
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

C4C销售订单行项目价格维护方法

需求很简单,能够创建销售订单,在行项目里添加产品,带出价格来,同时把总价显示在销售订单抬头区域。 如下图所示: 下面是具体配置。 Business Configuration里,点击Sales Order的配置: ...

JerryWang_SAP
40分钟前
9
0
deepin中配置robot framework环境

本文永久更新地址:https://my.oschina.net/bysu/blog/2989005 【若要到岸,请摇船:开源中国 不最醉不龟归】 1.在终端中输入pip,回车,如果提示没有该命令,则先安转pip sudo apt-get inst...

不最醉不龟归
今天
8
0
OSChina 周日乱弹 —— 钱不还,我就当你人不在了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享Bigleaf的单曲《小鹿》 《小鹿》- Bigleaf 手机党少年们想听歌,请使劲儿戳(这里) 周日在家做什么? 做手工呀, @poorfis...

小小编辑
今天
200
5
EOS docker开发环境

使用eos docker镜像是部署本地EOS开发环境的最轻松愉快的方法。使用官方提供的eos docker镜像,你可以快速建立一个eos开发环境,可以迅速启动开发节点和钱包服务器、创建账户、编写智能合约....

汇智网教程
今天
23
0
《唐史原来超有趣》的读后感优秀范文3700字

《唐史原来超有趣》的读后感优秀范文3700字: 作者:花若离。我今天分享的内容《唐史原来超有趣》这本书的读后感,我将这本书看了一遍之后就束之高阁了,不过里面的内容一直在在脑海中回放,...

原创小博客
今天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部