JQuery实现表格自动增加行,对新行添加事件 实现功能: 效果: 源码
通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢;通过此程序实现表格动态增加行,一直保持最下面有多个空白行。
效果:
一:原始页面
二:表1增加新行并绑定timepicker
三:表2自动增加行,新行绑定timepicker
源码
HTML源码:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link href="../Script/jquery-easyui-1.3.2/themes/default/easyui.css" rel="stylesheet" /> <style> .autoRows{ 350px; border:1px green solid; } .autoRows tbody tr td{ border-bottom:1px green solid; margin:0px; } .autoRows thead{ background-color:#8ec7d7; } .autoRows tfoot { background-color: #8ec7d7; } </style> </head> <body> <table border="0" cellspacing="0" > <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> <tr> <th>表头2</th> <th>表头2</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> </tbody> <tfoot> <tr> <th>表尾1</th> <th>表尾2</th> <th>表尾3</th> </tr> </tfoot> </table> <div style="height:20px;"></div> <table border="0" cellspacing="0" > <thead> <tr> <th>表头1</th> <th>表头1</th> <th>表头1</th> </tr> <tr> <th>表头2</th> <th>表头2</th> <th>表头2</th> </tr> </thead> <tbody> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> <tr> <td> <input /></td> <td> <input /></td> <td> <input /></td> </tr> </tbody> <tfoot> <tr> <th>表尾1</th> <th>表尾2</th> <th>表尾3</th> </tr> </tfoot> </table> </body> </html> <script src="../Script/jquery-1.7.2.min.js"></script> <script src="../Script/jquery.tableAutoRow.js"></script> <script src="../Script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <script src="../Script/jquery.timepicker.js"></script> <script type="text/javascript"> $(function () { $(".autoRows").tableAutoRow(aaa); function aaa(row) { $(row).find(':text').timepicker(); } }); function addrow(obj) { $.fn.tableAutoRow.insertRow(obj); } </script>