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获得后台数据，并写入到表格中

1. //获取某一出库类型某日期所有出库单 累计金额列表
   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以及行双击事件

1. //设置table样式 双击事件
   function setRowMouseOver(){
   $("#inpltable tr:not(:first)").each(function(){ 
2. //剔除表格里的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);
   
   }