需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天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. 混合线性模型(linear mixed models)

    一般线性模型.混合线性模型.广义线性模型 广义线性模型GLM很简单,举个例子,药物的疗效和服用药物的剂量有关.这个相关性可能是多种多样的,可能是简单线性关系(发烧时吃一片药退烧0.1度,两片药退烧0. ...

  2. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  3. Vrrp和Hsrp的区别

    VRRP原理协议简述简单来说,VRRP是一种容错协议,它为具有组播或广播能力的局域网(如以太网)设计,它保证当局域网内主机的下一跳路由器出现故障时,可以及时的由另一台路由器来代替,从而保持通讯的连续性 ...

  4. Roman To Integer leetcode java

    问题描述: Given a roman numeral, convert it to an integer. Input is guaranteed to be within the range fr ...

  5. Entertainment Box（可多执行的区间问题）

    本题出自: Nordic Collegiate Programming Contest 2015​ Ada, Bertrand and Charles often argue over which T ...

  6. oracle 创建自定义的流水号

    ; --你确定流水号只要3位? 使用它的下一个值用: seq_abc_taskid.nextval查询当前值用:seq_abc_taskid.currval比如你现在要插入一行到abc,你可以 ,se ...

  7. 深入理解php内核

    目录 第一部分 基本原理 第一章 准备工作和背景知识 第一节 环境搭建 第二节 源码布局及阅读方法 第三节 常用代码 第四节 小结 第二章 用户代码的执行 第一节 PHP生命周期 第二节 从SAPI开 ...

  8. 53. Maximum Subarray最大子序和

    网址:https://leetcode.com/problems/maximum-subarray/submissions/ 很简单的动态规划 我们可以把 dp[i] 表示为index为 i 的位置上 ...

  9. 32. Longest Valid Parentheses最长有效括号

    参考: 1. https://leetcode.com/problems/longest-valid-parentheses/solution/ 2. https://blog.csdn.net/ac ...

  10. Echarts 简单报表系列三：饼状图

    代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...