实现功能:
通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢;通过此程序实现表格动态增加行,一直保持最下面有多个空白行。
效果:
一:原始页面
二:表1增加新行并绑定timepicker
三:表2自动增加行,新行绑定timepicker
html源码:
表头1 表头1 表头1
表头2 表头2 表头2
表尾1 表尾2 表尾3
表头1 表头1 表头1
表头2 表头2 表头2
表尾1 表尾2 表尾3
js源码:
/// //为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行 (function ($) { $.fn.extend({ rowfunction: null, tableautorow: function (newrowfunction) { rowfunction = newrowfunction; return $(this).each(function () { var tb = this; if (!(this.tagname.touppercase() == tbody)) { if (!this.tbodies[0]) { return; } else { tb = this.tbodies[0]; } } //添加一个隐藏行,后面新增行复制此行 var lastrow = tb.rows[tb.rows.length - 1]; var row = $(lastrow).clone(true, true); $(row).insertafter($(tb).find(tr:last)).hide(); //为除所有行添加事件,当获得焦点时自动增加新行 for (var i = 0; i 0) { var lastrow = tb.rows[tb.rows.length - 1]; for (var j = 0; j < n; j++) { var row = $(lastrow).clone(true, true); //将新行添加到最后一行之前 row.insertbefore($(tb).find(tr:last)).show(); //为新增加的行添加事件 //addautorowsevent(tb.rows[tb.rows.length - 2]); //如果有回调函数则执行 if (typeof (rowfunction) == 'function') { rowfunction(row); } } } } //为指定行增加事件 function addautorowsevent(tr) { //如果是jquery对象则转为html对象 if (tr instanceof jquery) { tr = tr[0]; } $(tr).bind('click', autorows); var c = tr.cells.length; for (var j = 0; j < c; j++) { var childs = tr.cells[j].childnodes; for (var k = 0; k < childs.length; k++) { if (childs[k].type == text || childs[k].type == textarea || childs[k].type == button) { $(childs[k]).bind('focus', autorows); } } } } //在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行 //obj:行内的任意对象 //n:要增加的行数 //bautorows:是否要添加自动增加行的属性 $.fn.tableautorow.insertrow = function (obj, n, bautorows, isinsertafter) { var loop = 0; //加入循环次数,防止死循环 while (obj.tagname != tr && loop < 10) { obj = obj.parentnode; loop++; } if (obj.tagname != tr) { return; } var tb = obj.parentnode; switch (arguments.length) { case 3: var isinsertafter = true; case 2: var bautorows = true; var isinsertafter = true; case 1: var bautorows = true; var isinsertafter = true; var n = 1; } for (var i = 0; i < n; i++) { var lastrow = tb.rows[tb.rows.length - 1]; var row = $(lastrow).clone(true, true); //将新行添加到当前行之前/后 if (isinsertafter) { row.insertafter(obj).show(); } else { row.insertbefore(obj).show(); } if (bautorows) { addautorowsevent(row); } } } //清除指定行数据 //obj为行或者行内的节点 //startcolnum:起始列 //endcolumn:终止列 //isreset:是否恢复到初始值 $.fn.tableautorow.clearrowdata = function (obj, startcolnum, endcolumn, isreset) { var loop = 0; //加入循环次数,防止死循环 while (obj.tagname != tr && loop 0) { var l = node.childnodes.length; for (var i = 0; i < l; i++) { setobjdata(node.childnodes[i], isreset); } } } })(jquery);