最近做的项目中有一个需求就是要求在线填写表格内容时，不够的话可以动态添加一行，我这里用的jQuery来实现，下面是我项目截图展现：
当点击“添加输入框”按钮时，就会自动添加一行
下面我们来一下代码实现（把实际项目中的HTML代码简化了，其他功能可自己加）
<!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><br> <center><h3>Jquery实现表格动态增加一行，删除一行</h3></center> <table class="table" border="1" align="center"> <thead> <tr> <th>序号</th> <th>配置要求</th> <th>主要技术参数</th> </tr> </thead> <tbody> <tr id="clo"> <td class="td">1</td> <td> <input placeholder="添加配置要求" /></td> <td> <input placeholder="添加主要技术参数" /></td> </tr> <tr> <td class="td">2</td> <td> <input placeholder="添加配置要求" /></td> <td> <input placeholder="添加主要技术参数" /></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 = $("#clo").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>
该代码的截图：
简单易于理解，这里不做其他解说了
