JQuery实现表格动态增加行并对新行添加事件_jquery
程序员文章站
2022-04-22 20:21:29
...
实现功能:
通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢;通过此程序实现表格动态增加行,一直保持最下面有多个空白行。
效果:
一:原始页面
二:表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 cellsCount - 1 || !endColumn) { //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮) endColumn = cellsCount - 1; } if (isReset == undefined) { isReset = false; } for (var c = startColnum; c = 0; k--) { node.options[k].selected = node.options[k].defaultSelected; } } else { for (var k = node.options.length - 1; k >= 0; k--) { //node.options.remove(k); node.options[k].selected = false; } } break; case "checkbox": case "radio": if (isReset) { node.checked = node.defaultChecked; } else { node.checked = false; } break; } if (node.childNodes && node.childNodes.length > 0) { var l = node.childNodes.length; for (var i = 0; i