文档章节

jquery给table添加行

y
 yesNO
发布于 2016/10/27 18:06
字数 490
阅读 9
收藏 0

html代码

<!-- 表格   -->
					<div class="table-radius-top" style="width: 95%;margin-left: 2%;margin-top: 2%;">
					
						<div class="inline-block pr15" style="width: 5%; clear: both;margin-top: 4%;"></div>
						<input type="button" class="btn btn-primary" onclick="btn_delete()" name="" value="删除"/> 
						<input type="button" class="btn btn-primary" onclick="btn_add()" name="" value="新增"/> 
						<input type="button" class="btn btn-primary" onclick="btn_order_add()" name="" value="按订单新增"/>
						
						<table class="table table-hover table-radius-bordered" id="planTable" style="table-layout:fixed;">	
							<tr id="0" align="center" bgcolor="#66CCCC" onMouseOver="">
								<td width="6%">选择</td>
								<td width="17%">订单号</td>
								<td width="15%">应用名称</td>
								<td width="15%">应用ID</td>
								<td width="47%">投诉应用涉及AP名称</td>
								<td width="47%">AP代码</td>
								<td width="100%">订购发生时间</td>
								<td width="47%">订购途径</td>
								<td width="47%">订购金额</td>
							</tr>
							<tr align="center">
								<td>
									<input type="checkbox" name="chk0">
								</td>
	<!-- 							订单号 -->
								<td>
									<input name="orderId" type="text" size="8">
								</td>
								
								<!-- 应用名称 -->
								<td>
									<input name="iappname" placeholder='不超过25个汉字!' type="text" size="8">
								</td>
								
								<!-- 应用id  -->
								<td>
									<input name="appContent" type="text" size="8">
								</td>
								
								<!-- 投诉应用涉及AP名称 -->
								<td>
									<input name="iapname" type="text" size="8">
								</td>
								
								<!-- AP代码 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								
								<!-- 订购发生时间 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								<!-- 订购途径 -->
								<td>
									<input name="companyCode" type="text" size="8">
								</td>
								<!-- 订购金额 -->
								<td>
									<input name="ifee" type="text" size="8">
								</td>
							</tr>
						</table>
					</div>			

js//动态添加行:

//动态添加行
		function btn_add(){
			var rows = $("#planTable tr").length;
			var rows = rows-1;
			
			var tr = "<tr id="+rows+" align='center'>"
            +"<td><input type='checkbox' name='chk0'>"+rows+"</td>"
            +"<td><input name='orderId' type='text' size='8'></td>"
            +"<td><input name='iappname' placeholder='不超过25个汉字!' type='text' size='8'></td>"
            +"<td><input name='appContent' type='text' size='8'></td>"
            +"<td><input name='iapname' type='text' size='8'></td>"
            +"<td><input name='companyCode' type='text' size='8'></td>"
            
            +"<td><input name='companyCode' type='text' size='8'></td>"
            
            +"<td><input name='ifee' type='text' size='8'></td>"
            +"<td><input name='ifee' type='text' size='8'></td>"
        	+"</tr>";
        	
			$("#planTable tr:eq("+rows+")").after(tr);
		}



删除的js代码

//删除选择的行
		function btn_delete(){
			var ckbs=$("input:checked");
			if(ckbs.size()==0){
		        alert("要删除指定行,需选中要删除的行!");
		        return;
		     }
	         ckbs.each(function(){
	              $(this).parent().parent().remove();
	         });
		}

© 著作权归作者所有

y
粉丝 0
博文 10
码字总数 4839
作品 0
深圳
私信 提问
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.8K
1
推荐十个最新免费的 jQuery 表格插件

作为开发者都知道插件的重要性,有了插件的帮助,工作会更加高效。这次,我们收集了一些优秀的 jQuery 表格插件介绍给大家。 创建一个表格(table)并调整其规模,是一项艰难而繁琐的工作。作...

oschina
2015/06/10
49.6K
10
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.5K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
501
1
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
385
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
168
4
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部