需求是要实现表格的动态增加与删除,并且保留标题行和首行,找了半天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{ /*可输入区域样式*/ 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>