JS动态生成表单，并添加行双击事件

第一步：jsp上定义表格的div

<div class="ted_1 luru_5" align="center">

<tableid="inpltable"border="0" width="100%" cellspacing="1" cellpadding="0" bgcolor="#000000" class="mar3" style="font-size:14px;">

<tr id="0" bgcolor="#FFFFFF" align="center">

<td width="90" align="center" >记账日期</td>

<td width="80" align="center" >记账人</td>

<td width="150" align="center" >出库单号</td>

<td align="center" >往来单位</td>

<td width="80" align="center" >数量</td>

<td width="80" align="center" >售价金额</td>

<td width="80" align="center" >进价金额</td>

</tr>

</table>

</div>

第二步：JS使用Ajax获得后台数据，并写入到表格中

[javascript] view
plaincopy

//获取某一出库类型某日期所有出库单 累计金额列表

function getOutSheetAmtList(){

var hosnum=$('#hosnum').val();

var sdate=$('#sdate').val();//记账日期 始

var edate=$('#edate').val();//记账日期 末

var deptid=$('#deptid').val();//查询的单位编号

var unitname=$('#unitname').val();//往来单位名称

$.ajax({

async: false,

cache: false,

ifModified: true,

type: "post",

url: "ReptStat/getoutsheetamtlist.htm?&sdate="+sdate+"&edate="+edate+"&deptid="+deptid+"&unitname="+encodeURI(encodeURI(unitname))+"&hosnum="+hosnum ,

error:function(){

alert("服务器内部错误！");

},

success: function(data){

var json=eval("("+data+")");

$(".rmove").remove();

for (var i=0;i<json.length;i++){

var regdate=json[i].strregdate;//记账时间

var regmname=json[i].regmname;//审核人

var insheetno=json[i].insheetno;

var unitname=json[i].unitname;//往来单位

var sumqty=json[i].sumqty;

var sumamt1=parseFloat(json[i].sumamt);

var sumamt=leaveTwo(sumamt1);//保留2位

var amt_p=leaveTwo(parseFloat(json[i].amt_p));//保留2位

//var serinfo=checkdate+";"+unitname+";"+insheetno+";"+sumamt;

$('#'+i).after($(

"<tr id="+(i+1)+" name='"+insheetno+"' bgcolor='#FFFFFF' align='center' class='rmove' > "+

" <td>"+regdate+"</td> "+

" <td >"+regmname+"</td> "+

" <td >"+insheetno+"</td> "+

" <td align='left'>"+unitname+"</td> "+

" <td align='right'>"+sumqty+"</td> "+

" <td align='right' >"+sumamt+"</td> "+

" <td align='right' >"+amt_p+"</td> "+

"</tr>"

));

}

}

});

}

第三步：给表格添加CSS以及行双击事件

[javascript] view
plaincopy

//设置table样式 双击事件

function setRowMouseOver(){

$("#inpltable tr:not(:first)").each(function(){

//剔除表格里的first行，"：last"表示尾行 以逗号隔开

$(this).css("cursor","pointer");

var row = $(this);

$(this).get()[0].attachEvent("ondblclick", function(){

var insheetno=row.attr('name');

showDetail(insheetno);//显示具体明细

});

$(this).get()[0].attachEvent("onmouseover",function(){

row.css("background-color","CCCCFF");

});

$(this).get()[0].attachEvent("onmouseout",function(){

row.css("background-color","#FFFFFF");

});

})

}

/**

* 点击行查询，弹层显示明细记录表

*/

function showDetail(insheetno){

var insheetno=insheetno;

setTimeout(function(){

$.blockUI({

message:"<iframe id='detailTableFrame' height='100%' width='100%' frameborder='0' src='ReptStat/showOutsheetDetailTable.htm?insheetno="+insheetno+"&time="+(new Date()).valueOf()+"'></iframe>",

css:{width:"850px",height:"480px",border:"1px solid #b6cfd6",padding:"1px",left:parent.getLeftPos(1300),top:parent.getTopPos(650)}

});

},0);

}