需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天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. socket 发送图片

    using System;using System.Collections.Generic;using System.Text;using System.Net.Sockets;using Syste ...

  2. 20165327 2017-2018-2 《Java程序设计》第2周学习总结

    20165327 2017-2018-2 <Java程序设计>第2周学习总结 内容:教材第2.3章 内容小结: (一)标识符由字母.下划线.美元符号和数字组成, 并且第一个字符不能是数字字 ...

  3. Java -------- 首字母相关排序总结

    Java 字符串数组首字母排序 字符串数组按首字母排序:(区分大小写) String[] strings = new String[]{"ba","aa",&q ...

  4. anaconda安装tensorflow

    1.下载anaconda python3.5版本,Windows不支持python3.6,linux和mac支持python2.7和python3.3+ 2.创建环境   conda create - ...

  5. locust 学习中

    [转自]http://blog.51cto.com/youerning/2089930 前言 都说haproxy很牛x, 可是测试的结果实在是不算满意, 越测试越失望,无论是长连接还是并发, 但是测试 ...

  6. python基础之字符串以及切片等操作

    1.字符类型 1.整型 int  2. str 字符串 3.bool 布尔值 4.list 表格,常用于大量数据的存储 用[ ]表示  5.tuple 元祖 ,不能发生改变()表示  6.dict 字 ...

  7. 6月17 ThinkPHP连接数据库------数据的修改及删除

    1.数据修改操作 save()  实现数据修改,返回受影响的记录条数 具体有两种方式实现数据修改,与添加类似(数组.AR方式) 1.数组方式 a)         $goods = D(“Goods” ...

  8. 5月30---6月2 DedeCMS以及动态仿站

    什么是DedeCMS 织梦内容管理系统(DedeCMS),是一个集内容发布.编辑.管理检索等于一体的网站管理系统(Web CMS),他拥有国外CMS众多特点之外,还结合中国用户的需要,对内容管理系统概 ...

  9. MySQL 分页查询和存储过程

    一.分页查询 使用limit函数,limit关键字的用法: LIMIT [offset,] rows: offset指定要返回的第一行的偏移量,rows第二个指定返回行的最大数目.初始行的偏移量是0( ...

  10. php 字符编码转换

    <?php/** * Created by PhpStorm. * User: yxp * Date: 2016/11/8 * Time: 16:47 */ /** * 将非GBK字符集的编码转 ...