JQuery实现表格动态增加行并对新行添加事件
实现功能:
通常在编辑表格时表格的行数是不确定的,如果一次增加太多行可能导致页面内容太多,反应变慢;通过此程序实现表格动态增加行,一直保持最下面有多个空白行。
效果:
一:原始页面
二:表1增加新行并绑定timepicker
三:表2自动增加行,新行绑定timepicker
HTML源码:
<!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title></title> <linkhref="../Script/jquery-easyui-1.3.2/themes/default/easyui.css"rel="externalnofollow"rel="stylesheet"/> <style> .autoRows{ width:350px;border:1pxgreensolid; } .autoRowstbodytrtd{ border-bottom:1pxgreensolid; margin:0px; } .autoRowsthead{ background-color:#8ec7d7; } .autoRowstfoot{ background-color:#8ec7d7; } </style> </head> <body> <tableborder="0"cellspacing="0"id="table1"class="autoRows"> <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> <inputid="Button1"type="button"value="insertAfter"onclick="addrow(this);"/></td> <td> <inputid="Button3"type="button"value="Clear"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,false);"/></td> <td> <inputid="Text2"type="text"value="aaaa"/></td> </tr> <tr> <td> <inputid="Button2"type="button"value="insertBefore"onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);"/></td> <td> <inputid="Button4"type="button"value="Reset"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,true);"/></td> <td> <inputid="Text1"name="ttt"type="text"value="asdfasfasfdsd"/></td> </tr> <tr> <td> <inputid="Button5"type="button"value="insertBefore"onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);"/></td> <td> <inputid="Button6"type="button"value="Reset"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,true);"/></td> <td> <inputid="Text3"type="text"name="Text3"/></td> </tr> </tbody> <tfoot> <tr> <th>表尾1</th> <th>表尾2</th> <th>表尾3</th> </tr> </tfoot> </table> <divstyle="height:20px;"></div> <tableborder="0"cellspacing="0"id="table2"class="autoRows"> <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> <inputid="Button7"type="button"value="insertAfter"onclick="addrow(this);"/></td> <td> <inputid="Button8"type="button"value="Clear"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,false);"/></td> <td> <inputid="Text4"type="text"value="aaaa"/></td> </tr> <tr> <td> <inputid="Button9"type="button"value="insertBefore"onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);"/></td> <td> <inputid="Button10"type="button"value="Reset"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,true);"/></td> <td> <inputid="Text5"name="ttt"type="text"value="asdfasfasfdsd"/></td> </tr> <tr> <td> <inputid="Button11"type="button"value="insertBefore"onclick="$.fn.tableAutoRow.insertRow(this,1,true,false);"/></td> <td> <inputid="Button12"type="button"value="Reset"onclick="$.fn.tableAutoRow.clearRowData(this,2,2,true);"/></td> <td> <inputid="Text6"type="text"name="Text3"/></td> </tr> </tbody> <tfoot> <tr> <th>表尾1</th> <th>表尾2</th> <th>表尾3</th> </tr> </tfoot> </table> </body> </html> <scriptsrc="../Script/jquery-1.7.2.min.js"></script> <scriptsrc="../Script/jquery.tableAutoRow.js"></script> <scriptsrc="../Script/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <scriptsrc="../Script/jquery.timepicker.js"></script> <scripttype="text/javascript"> $(function(){ $(".autoRows").tableAutoRow(aaa); functionaaa(row){ $(row).find(':text').timepicker(); } }); functionaddrow(obj){ $.fn.tableAutoRow.insertRow(obj); } </script>
JS源码:
///<referencepath="jquery-1.7.2.min.js"/> //为表格主体添加单击事件,当单击时添加行数,使表格保持有n个空行 (function($){ $.fn.extend({ rowfunction:null, tableAutoRow:function(newRowFunction){ rowfunction=newRowFunction; return$(this).each(function(){ vartb=this; if(!(this.tagName.toUpperCase()=="TBODY")){ if(!this.tBodies[0]){ return; }else{ tb=this.tBodies[0]; } } //添加一个隐藏行,后面新增行复制此行 varlastRow=tb.rows[tb.rows.length-1]; varrow=$(lastRow).clone(true,true); $(row).insertAfter($(tb).find("tr:last")).hide(); //为除所有行添加事件,当获得焦点时自动增加新行 for(vari=0;i<tb.rows.length;i++){ AddAutoRowsEvent(tb.rows[i]); } }); } }); //自动增加行 functionautoRows(e){ vare=e||event; varobj=e.target||e.srcElement; while(obj.tagName!="TR"){ obj=obj.parentNode; } vartb=obj.parentNode; varindex=$(obj).index(); varn=5-(tb.rows.length-index); if(n>0){ varlastRow=tb.rows[tb.rows.length-1]; for(varj=0;j<n;j++){ varrow=$(lastRow).clone(true,true); //将新行添加到最后一行之前 row.insertBefore($(tb).find("tr:last")).show(); //为新增加的行添加事件 //AddAutoRowsEvent(tb.rows[tb.rows.length-2]); //如果有回调函数则执行 if(typeof(rowfunction)=='function'){ rowfunction(row); } } } } //为指定行增加事件 functionAddAutoRowsEvent(tr){ //如果是JQuery对象则转为HTML对象 if(trinstanceofjQuery){ tr=tr[0]; } $(tr).bind('click',autoRows); varc=tr.cells.length; for(varj=0;j<c;j++){ varchilds=tr.cells[j].childNodes; for(vark=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){ varloop=0;//加入循环次数,防止死循环 while(obj.tagName!="TR"&&loop<10){ obj=obj.parentNode; loop++; } if(obj.tagName!="TR"){ return; } vartb=obj.parentNode; switch(arguments.length){ case3: varisInsertAfter=true; case2: varbAutoRows=true; varisInsertAfter=true; case1: varbAutoRows=true; varisInsertAfter=true; varn=1; } for(vari=0;i<n;i++){ varlastRow=tb.rows[tb.rows.length-1]; varrow=$(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){ varloop=0;//加入循环次数,防止死循环 while(obj.tagName!="TR"&&loop<10){ obj=obj.parentNode; loop++; } if(obj.tagName!="TR"){ return; } varcellsCount=obj.cells.length;//此行单元格总数 if(startColnum<0||!startColnum){//如果未指定清除起始列则从第一列清除 startColnum=0; } if(endColumn>cellsCount-1||!endColumn){//如果未指定清除终止列则清除到最后一列前(通常最后一列用于放置清除按钮) endColumn=cellsCount-1; } if(isReset==undefined){ isReset=false; } for(varc=startColnum;c<=endColumn;c++)//循环各列,设置单元格里的控件值 { for(varj=0;j<obj.cells[c].childNodes.length;j++){//循环处理指定单元格中的子节点 varnode=obj.cells[c].childNodes[j]; setObjData(node,isReset); } } }; functionsetObjData(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(vark=node.options.length-1;k>=0;k--){ node.options[k].selected=node.options[k].defaultSelected; } }else{ for(vark=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){ varl=node.childNodes.length; for(vari=0;i<l;i++){ setObjData(node.childNodes[i],isReset); } } } })(jQuery);