文档章节

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

柴高八斗之父
 柴高八斗之父
发布于 2017/09/01 19:57
字数 219
阅读 12
收藏 0
点赞 0
评论 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
博文 172
码字总数 86465
作品 0
宁波
前端工程师
SpreadJS 表格控件发布 V11 版本,新增图表及前端 PDF 导出

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

葡萄城控件技术团队
2017/12/08
316
2
帆软商业智能FineBI 4.0今日正式发布

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

玄学酱
05/21
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.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
ASP.NET数据网格控件WebGrid Enterprise全新发布v10|附下载

WebGrid Enterprise 是一款针对ASP.NET平台而设计的数据网格控件。WebGrid.NET Enterprise能够显示和操作标准数据,允许用户自由地对数据进行操作,使用简单,能有效节约您的开发时间。最新版...

Miss_Hello_World
2016/05/03
81
0
码云更新汇总,新增批量删除分支功能

新增功能: 新增批量删除分支功能。 新增码云新增 Fork 到组织或企业功能。 新增《码云非活跃账号处理规范》。 《码云封面人物》第三期:这个前端程序媛"对象"有点多。 优化功能: 码云 Lo...

达尔文
2017/11/13
482
4
avue v1.5.0 发布,快速构建 crud 和 form 等组件的解决方案

1.5.0 说明:avue1.x版本已经趋向于稳定,将不再做新的功能增加,但会根据issuse继续持续维护和优化将更多的精力投放于avue2.0 课程视频更新 B站视频 1.Avue修仙系列之基础环境的准备和课程介...

Smallwei小伟
07/15
0
0
AOSuite V3.0 发布,开源 JavaEE 快速开发平台

AOSuite V3.0发布了,这个版本包含 11 个新增/修复/优化。 AOSuite在线演示系统 http://121.41.231.94/aosuite 或 备用地址 版本变更日志 1、【修复】修复了Httpclient工具类设置连接超时时间...

阿老表
2017/03/30
2.2K
5
python django框架 渲染和ajax表单提交周报表

一. 实际需求 之前这篇文章kettle-自动生成周报 是使用java开源ETL工具kettle实现,正常情况下是每天写工作完成情况到Excel表,每周五定时任务启动读取Excel日志写入数据库,再读取数据库内容按...

程程同学
2017/11/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Git 基础 - 远程仓库的使用

远程仓库的使用 要参与任何一个 Git 项目的协作,必须要了解该如何管理远程仓库。远程仓库是指托管在网络上的项目仓库,可能会有好多个,其中有些你只能读,另外有些可以写。同他人协作开发某...

谢思华
12分钟前
0
0
面试宝典-悲观锁和乐观锁

悲观锁(Pessimistic Lock), 顾名思义,就是很悲观,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会block直到它拿到锁。 乐观锁(Optimistic...

suyain
14分钟前
0
0
崛起于Springboot2.X之集成MongoDb使用mongoTemplate CRUD(27)

1、pom依赖 <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.7</version></dependency><dependency> <groupId>log4j</......

木九天
24分钟前
0
0
切分log日志

新建logback.xml放到resource里面 <?xml version="1.0" encoding="utf-8"?><configuration> <appender name="consoleLog" class="ch.qos.logback.core.ConsoleAppender"> <......

talen
29分钟前
0
0
spring @Resource 和 @Autowired 的使用区别

这两个 注解 @Resource 和 @Autowired , 常识都知道 @Resource 是 JAVAEE 自带的,@Autowired 是 spring 的自定义注解。 一般情况下, 使用 bean的时候, 这两个注解 随便使用一个即可。 但...

之渊
34分钟前
0
0
springboot集成elasticsearch客户端问题记录

1背景说明 服务端ES版本为5.5.2,springboot版本为1.5.6。 工程中添加如下依赖 2问题记录 2.1 NetworkPlugin类找不到 报错java.lang.ClassNotFoundException: org.elasticsearch.plugins.Net...

zjg23
36分钟前
1
0
快速构建ceph可视化监控系统

前言 ceph的可视化方案很多,本篇介绍的是比较简单的一种方式,并且对包都进行了二次封装,所以能够在极短的时间内构建出一个可视化的监控系统 本系统组件如下: ceph-jewel版本 ceph_expor...

万建宁
36分钟前
0
0
Java构造器使用注意

public class 父类A {int age = 10;protected void say() {System.out.println("父类A");}public 父类A() {override();}public void override() {Syst...

咸鱼AI
37分钟前
0
0
TensorFlow 线性分类

构造直线 z = 2 * x - 3 * y + 4 x0*w0+x1*w1+b=0 x1=-x0* w0/w1-b/w1 斜率 k= -w0/w1 截距 -b/w1 随机生成数据,加入一定的偏差,用直线将二维平面分为两部分 使用线性模型拟合参数 损失函数...

阿豪boy
40分钟前
0
0
翻译冒泡排序测试

翻译一个冒泡排序: var a = [1,3,2,4,6,5];var f = 0;var n = a.length ;for( var i =1; i<= n; i++) { for( var j = n-1 ; j >= i; j --) { if(a[j] < a[j+1]) { ......

钟元OSS
41分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部