需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天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. English trip V1 - B 1. How much is it? 它是多少钱？ Teacher:Corrine Key: is/are

    In this lesson you will learn to ask about prices. 本节课你将学习询问关于价格 课上内容(Lesson) one piece of     two p ...

  2. Java中的参数传递 --Java

    1.基本类型传值,对象类型传地址 按值传递:当将一个参数传递给一个方法时,方法接收的是原始值的一个副本.因此,如果方法修改了该参数,仅改变副本,而原始值保持不变. 按引用传递:当将一个参数传递给一个方 ...

  3. Spring Batch 体系结构

    Spring Batch 设计的时候充分考虑了可扩展性和各类终端用户. 下图显示了 Spring Batch 的架构层次示意图,这种架构层次为终端用户开发者提供了很好的扩展性与易用性. 上图显示的是 ...

  4. leetcode-algorithms-28 Implement strStr()

    leetcode-algorithms-28 Implement strStr() mplement strStr(). Return the index of the first occurrenc ...

  5. HDU-2874-森林求LCA/tarjan

    http://acm.hdu.edu.cn/showproblem.php?pid=2874 给出一个森林,询问任意两点最短距离. tarjan跑一遍即可,就是这个题卡内存,vector会MLE,换前 ...

  6. LINQ 常用from

    单个form子句string[] values = { "LINQ学习", "LINQ基本语句", "from子句", "单个fr ...

  7. Leetcode 970. 强整数

    970. 强整数  显示英文描述 我的提交返回竞赛   用户通过次数223 用户尝试次数258 通过次数231 提交次数801 题目难度Easy 给定两个正整数 x 和 y,如果某一整数等于 x^i ...

  8. 【九校联考-24凉心模拟】锻造(forging)

    题目背景 勇者虽然武力值很高,但在经历了多次战斗后,发现怪物越来越难打, 于是开始思考是不是自己平时锻炼没到位,于是苦练一个月后发现……自 己连一个史莱姆都打不过了. 勇者的精灵路由器告诉勇者其实是他 ...

  9. 64位Ubuntu下配置CP-ABE环境

    CP-ABE环境配置 本文密码学专业,论文仿真需要CP-ABE,现将配置过程作个记录 cpabe依赖pbc,pbc依赖gmp,gmp依赖M4.bison.flex,所以.. sudo apt-get  ...

  10. 【转】MVC中code first方式开发，数据库的生成与更新(Ef6)

    一,在models文件夹中,建立相应的model文件         这里注意一点,这里建立的class名,就是数据库里表的名字.         在这里面,可以建立表之间的关系. 这里要说明一点的事 ...