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);