需求是要实现表格的动态增加与删除，并且保留标题行和首行，找了半天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 M1 - PC1 Are you a Model? 你是模特吗？ Teacher:Taylor

    In this lesson you will learn to talk about jobs. 课上内容(Lesson) What's your partner name? Her name is ...

  2. tigervnc-server安装使用

    root/finance, hm/finance   一,安装tigervnc-server VNC软件包 [root@localhost ~]# yum install tigervnc-serve ...

  3. django权限管理（一）

    权限:权限就是一个包含正则的url. Rbac 权限管理: Role-Based Access Control,基于角色的访问控制.用户通过角色与权限进行关联,一个用户可以有多个角色,一个角色可以有多 ...

  4. vux, vue上拉加载更多

    <template> <" :bottom-method="loadBottom" :bottom-all-loaded="bottomAll ...

  5. 『Python』PIL图像处理_形变操作

    使用PIL.Image进行简单的图像处理 # coding=utf-8 from PIL import Image import matplotlib.pyplot as plt def show_i ...

  6. 更改 Windows 软件默认安装位置教程

    在打开的“运行”窗口中,输入命令regedit,然后点击确定按钮 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion 百度 ...

  7. MVC实战之排球计分（二）—— 构架概要设计

    本程序主要基于MVC4框架,使应用程序的输入,处理和输出强制性分开,使得软件可维护性,可扩展性,灵活性以及封装性得到提高, MVC应用程序分为三个核心部件:Model,View, Controller ...

  8. leetcode-algorithms-14 Longest Common Prefix

    leetcode-algorithms-14 Longest Common Prefix Write a function to find the longest common prefix stri ...

  9. VMware（虚拟机） 12版安装深度linux系统

    需要的工具: 1.VM ware workstation12虚拟机(可自行百度下载)  参考:VMware Workstation 12.5.5 官方中文正式版,下载地址:http://www.epi ...

  10. html5 meta标签的认知储备

    在开发移动或者PC端的时候除了'<meta charset="UTF-8">'这个设置编码格式的meta标签,还有一些其他方面的设置 一.<meta name=& ...