JQuery动态操作表行并对新行添加事件

php中世界最好的语言

发布时间：2018-04-24 13:39:46

1678人浏览过

来源于php中文网

原创

这次给大家带来JQuery动态操作表行并对新行添加事件，JQuery动态操作表行并对新行添加事件的注意事项有哪些，下面就是实战案例，一起来看一下。实现功能：

通常在编辑表格时表格的行数是不确定的，如果一次增加太多行可能导致页面内容太多，反应变慢；通过此程序实现表格动态增加行，一直保持最下面有多个空白行。

效果：

一：原始页面

二：表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 < tb.rows.length; i++) { 
AddAutoRowsEvent(tb.rows[i]); 
} 
}); 
} 
}); 
//自动增加行 
function autoRows(e) { 
var e = e || event; 
var obj = e.target || e.srcElement; 
while (obj.tagName != "TR") { 
obj = obj.parentNode; 
} 
var tb = obj.parentNode; 
var index = $(obj).index(); 
var n = 5 - (tb.rows.length - index); 
if (n > 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 < 10) { 
obj = obj.parentNode; 
loop++; 
} 
if (obj.tagName != "TR") { 
return; 
} 
var cellsCount = obj.cells.length; //此行单元格总数 
if (startColnum < 0 || !startColnum) { //如果未指定清除起始列则从第一列清除 
startColnum = 0; 
} 
if (endColumn > cellsCount - 1 || !endColumn) { //如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮) 
endColumn = cellsCount - 1; 
} 
if (isReset == undefined) { 
isReset = false; 
} 
for (var c = startColnum; c <= endColumn; c++) //循环各列,设置单元格里的控件值 
{ 
for (var j = 0; j < obj.cells[c].childNodes.length; j++) { //循环处理指定单元格中的子节点 
var node = obj.cells[c].childNodes[j]; 
setObjData(node, isReset); 
} 
} 
}; 
function setObjData(node, isReset) { 
switch (node.type) { 
case "text": 
case "hidden": 
case "textarea": 
if (isReset) { 
node.value = node.defaultValue; 
} else { 
node.value = ""; 
} 
break; 
case "select-one": 
case "select-multiple": 
if (isReset) { 
for (var k = node.options.length - 1; k >= 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 < l; i++) { 
setObjData(node.childNodes[i], isReset); 
} 
} 
} 
})(jQuery);

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关专题

jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容，供大家免费下载体验。

150

2023.09.12

jquery怎么操作json

操作的方法有：1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”；3、“$.each(obj, callback)”；4、“$.ajax()”。更多jquery怎么操作json的详细内容，可以访问本专题下面的文章。

311

2023.10.13

jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题，详情请看本专题下面的文章。php中文网欢迎大家前来学习。

394

2023.11.10