需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天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. 文献导读 - Machine Learning Identifies Stemness Features Associated with Oncogenic Dedifferentiation

    参考: Machine Learning Identifies Stemness Features Associated with Oncogenic Dedifferentiation 前所未有!1 ...

  2. java ----> 手动编译java项目

    环境: jdk1.8,cmd,notepad++ 创建java工程test,创建文件夹: src classes lib 说明: src 放置.java文件 classes 放置.class文件 li ...

  3. maven ----> 子工程中引入父工程

    创建父工程,打包方式指定为 pom <groupId>com.example</groupId> <artifactId>SleuthMain</artifa ...

  4. 怎样在winform中上传图片

    http://jingyan.baidu.com/article/b7001fe157d6b60e7382dd7f.html 因为WinForm都是运行在本地的,而我们的网站一般都是布署在服务器上,运 ...

  5. LeetCode--003--无重复字符的最长子串（java）

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb" 输出: 3 解释: 因为无重复字符的最长子串是 "abc&qu ...

  6. 20181013xlVba计算优秀率及合格率

    Sub 计算高一优秀合格率() Dim Wb As Workbook Dim Sht As Worksheet Dim oSht As Worksheet Dim dOs As Object 'Out ...

  7. NYOJ - 整数划分（四）

    题目链接:http://acm.nyist.net/JudgeOnline/problem.php?pid=746 要求对一个n的整数插入m个乘号,求最大结果. 构造dp:dp[i][j]表示枚举至j ...

  8. Spring Batch 背景

    在开源项目及其相关社区把大部分注意力集中在基于 web 和 SOA 基于消息机制的框架中时,基于 Java 的批处理框架却无人问津,尽管在企业 T 环境中一直都有这种批处理的需求.但因为缺乏一个标准的 ...

  9. JavaScript 入门笔记

    JavaScript   1.JS和DOM的关系 浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象 浏览器内部有一个JS的解释器/执行/引擎,如chrome用v8 ...

  10. Maxim and Array CodeForces - 721D (贪心)

    大意: 给定序列, 每次操作选择一个数+x或-x, 最多k次操作, 求操作后所有元素积的最小值 贪心先选出绝对值最小的调整为负数, 再不断选出绝对值最小的增大它的绝对值 #include <io ...