需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天jq插件，没找到合适的，所以自己写了个demo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">

	table.table input{ /*可输入区域样式*/

width:100%;

height: 100%;

border:none; /* 输入框不要边框 */

font-family:Arial;

}

</style>

</head>

<body>

<br>

<table class="table" border="1">

	<thead>

	<tr>

		<th>检项</th>

		<th>厚度</th>

		<th>光度</th>

		<th>外观</th>

	</tr>

	</thead>

	<tbody>

	<tr id="a">

		<td class="td"></td>

		<td><input type="" name=""></td>

		<td><input type="" name=""></td>

		<td><input type="" name=""></td>

	</tr>

	<tr>

		<td class="td"></td>

		<td><input type="" name=""></td>

		<td><input type="" name=""></td>

		<td><input type="" name=""></td>

	</tr>

	</tbody>

</table>

<button onclick="fun()">增加一行</button>

<button onclick="del()">删除一行</button>

<script type="text/javascript">                   //前面的序号1,2,3......

	var i = 1;

	$(".td").each(function(){

		$(this).html(i++);

	})

	function fun(){

		var $td = $("#a").clone();       //增加一行,克隆第一个对象

		$(".table").append($td);

		var i = 1;

		$(".td").each(function(){       //增加一行后重新更新序号1,2,3......

		$(this).html(i++);

		})

		$("table tr:last").find(":input").val('');   //将尾行元素克隆来的保存的值清空

	}

	function del(){

		$("table tr:not(:first):not(:first):last").remove();      //移除最后一行,并且保留前两行

	}

</script>

 </body>

</html>

table添加行的更多相关文章

  1. js动态给table添加行(tr)

    html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> < ...

  2. Jquery Table添加行、删除行

    html页面代码 <table id="tblUserInfo"> </table> Js代码 function DealUserInfo(qty){ ) ...

  3. light table 添加行号 更新

    在上一个笔记修改完字体后.再添加上行号

  4. table形式的列表页面显示

    (该案例在项目中的reserve_bchmc.html,其对应的后台在CountBean中) 先看一下效果图: 该列表页面并不是用easyUI中的datagrid实现的,而是用table实现页面显示的 ...

  5. JavaScript经典代码【一】【javascript HTML控件获取值】

    javascript HTML控件获取值 1.下拉列表框选定值 ddlPageSize.options[ddlPageSize.selectedIndex].value ddlPageSize.opt ...

  6. jQuery动态添加删除与添加表行代码

    具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" />< ...

  7. 2018.7.13vue知识小结

    //配置是否允许vue-devtools检查代码,方便调试,生产环境中需要设置为false Vue.config.devtools=false; Vue.config.productionTip=fa ...

  8. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  9. table指定位置添加行

    <html> <head> <script type="text/javascript"> //global var //to find the ...

随机推荐

  1. Python核心编程的四大神兽

    http://www.cnblogs.com/ssy3340/p/9747722.html

  2. C# 编写WCF简单的服务端与客户端

    http://www.wxzzz.com/1860.html Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,可以翻译为Win ...

  3. Could not allocate 40960 bytes percpu data

    2017-10-01 21:40:56[  176.700091] vif: Could not allocate 40960 bytes percpu data[  263.762812] perc ...

  4. HTML 弹出遮罩层二（遮罩层和内容标签分开）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 数组<-->变量

    /** * *数组与变量之间转换 **/ $name='jb51'; $email='jb51@jb51.net'; $info=compact('name','email'); print_r($i ...

  6. XXE漏洞

    原理:XML外部实体注入,简称XXE漏洞,XML数据在传输中数据被修改,服务器执行被恶意插入的代码.当允许引用外部实体时,通过构造恶意内容,就可能导致任意文件读取.系统命令执行.内网端口探测.攻击内网 ...

  7. linux 查看日志命令

    linux中命令cat.more.less均可用来查看文件内容, 区别:cat是一次性显示整个文件的内容,还可以将多个文件连接起来显示,它常与重定向符号配合使用,适用于文件内容少的情况:more和le ...

  8. Jmeter的使用简介及实例

    一.安装及配置环境1.安装   java环境   该软件需要java环境,安装jdk,在百度自行查找安装   环境变量配置:变量名JAVA_HOME 值:jdk的安装路径                ...

  9. 十、 持久层框架（MyBatis）

    一.基于MyBatis动态SQL语句 1.if标签 实体类Product的字段比较多的时候,为了应付各个字段的查询,那么就需要写多条SQL语句,这样就变得难以维护. 此时,就可以使用MyBatis动态 ...

  10. java关键字总结

    static: 用来修饰成员变量和成员方法,也可以形成静态static代码块,可以形成静态内部类,也可以用于静态导包. 1.静态方法中不能用this和super关键字,不能直接访问所属类的实例变量和实 ...