JQuery实现表格动态增加行并对新行添加事件_jqu

2019-12-02 18:42 来源:未知

实现功能:

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

效果:

二:表1增加新行并绑定timepicker

三:表2自动增加行,新行绑定timepicker

HTML源码:

      .autoRows{ width: 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; }    

表头1

表头1

表头1

表头2

表头2

表头2

表尾1

表尾2

表尾3

表头1

表头1

表头1

表头2

表头2

表头2

表尾1

表尾2

表尾3

JS源码:

///  //为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行  { $.fn.extend({ rowfunction: null, tableAutoRow: function  { rowfunction = newRowFunction; return $.each { var tb = this; if (!(this.tagName.toUpperCase { if  { return; } else { tb = this.tBodies[0]; } } //添加一个隐藏行,后面新增行复制此行 var lastRow = tb.rows[tb.rows.length - 1]; var row = $.clone.insertAfter).hide(); //为除所有行添加事件,当获得焦点时自动增加新行 for (var i = 0; i < tb.rows.length; i++) { AddAutoRowsEvent; } }); //自动增加行 function autoRows { var e = e || event; var obj = e.target || e.srcElement; while  { obj = obj.parentNode; } var tb = obj.parentNode; var index = $; var n = 5 - (tb.rows.length - index); if  { var lastRow = tb.rows[tb.rows.length - 1]; for (var j = 0; j < n; j++) { var row = $.clone; //将新行添加到最后一行之前 row.insertBefore).show(); //为新增加的行添加事件 //AddAutoRowsEvent(tb.rows[tb.rows.length - 2]); //如果有回调函数则执行 if  == 'function') { rowfunction; } } } } //为指定行增加事件 function AddAutoRowsEvent { //如果是JQuery对象则转为HTML对象 if  { tr = tr[0]; } $.bind; 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") { $.bind; } } } } //在表格中指定位置插入指定行数,新插入的行内容为同一表格主体最后一行 //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  { return; } var tb = obj.parentNode; switch  { 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 = $.clone; //将新行添加到当前行之前/后 if  { row.insertAfter; } else { row.insertBefore; } if  { AddAutoRowsEvent; } } } //清除指定行数据 //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  { return; } var cellsCount = obj.cells.length; //此行单元格总数 if (startColnum < 0 || !startColnum) { //如果未指定清除起始列则从第一列清除 startColnum = 0; } if (endColumn > cellsCount - 1 || !endColumn) { //如果未指定清除终止列则清除到最后一列前 endColumn = cellsCount - 1; } if  { 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; } } }; function setObjData { switch  { case "text": case "hidden": case "textarea": if  { node.value = node.defaultValue; } else { node.value = ""; } break; case "select-one": case "select-multiple": if  { 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; node.options[k].selected = false; } } break; case "checkbox": case "radio": if  { 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); } } } });
TAG标签:
版权声明:本文由金沙澳门唯一官网发布于金沙澳门登陆网站,转载请注明出处:JQuery实现表格动态增加行并对新行添加事件_jqu