当前位置： 代码迷 >> Web前端 >> jquery 动态增多行
  详细解决方案

jquery 动态增多行

热度：145   发布时间：2012-09-17 12:06:51.0
jquery 动态增加行
$("#newOrd").click(function(){
var $table= $("#tabOrders tr");
var len=$table.length;
var listId=len-2;
$("#tabOrders").append("<tr height='25' id='"+(len+1)+"' class='tr_3' > <td class='OrderCellBt' width='40' align='center' >"+(len-1)+"</td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].ordSeqName' class='NoneBorder'  style='WIDTH: 100px; HEIGHT: 18px; TEXT-ALIGN: left' /></td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].catName' readonly  class='NoneBorder' style='WIDTH: 110px; HEIGHT: 18px; TEXT-ALIGN: left' /><input class='helpbutton' align='right' onclick='showCatNo("+(len+1)+");' type='button'><input type='hidden' name='ordersDtlList["+listId+"].catNo' /></td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].orddUnit' class='NoneBorder'  style='WIDTH: 42px; HEIGHT: 18px; TEXT-ALIGN: center'  /></td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].orddQty' class='NoneBorder' onblur='getPrice(this,"+(len+1)+")'  style='WIDTH: 45px; HEIGHT: 18px; TEXT-ALIGN: right'   /></td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].orddPrc' class='NoneBorder' onblur='getPrice(this,"+(len+1)+")'  style='WIDTH: 45px; HEIGHT: 18px; TEXT-ALIGN: right' /></td>" +
"<td class='OrderCellItem' align='center' colSpan='2'><input name='ordersDtlList["+listId+"].orddAmt'  readonly     onblur='getPrice(this,"+(len+1)+")' class='NoneBorder' style='WIDTH: 45px; HEIGHT: 18px; TEXT-ALIGN: right' /></td>" +
"<td class='OrderCellItem' align='center'><input name='ordersDtlList["+listId+"].orddRemark' class='NoneBorder' style='WIDTH: 40px; HEIGHT: 18px; TEXT-ALIGN: left' /><input type='button' style='WIDTH: 20px; BACKGROUND-COLOR: #e0e3ea' onclick='showRemark("+(len+1)+")' value='...' ></td>" +
"<td class='OrderCellItem' align='center' ><input name='ordersDtlList["+listId+"].orddFund1'        class='NoneBorder' style='WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left' /></td>" +
"<td class='OrderCellItem' align='center' ><input name='ordersDtlList["+listId+"].orddFund3'        class='NoneBorder' style='WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left' /></td>" +
"<td class='OrderCellItem' align='center' ><input name='ordersDtlList["+listId+"].orddFund5'        class='NoneBorder' style='WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left' /></td>" +
"<td class='OrderCellItem' align='center'><a href='javascript:void(0)' onclick='deltr("+(len+1)+")'><font color='blue'>删除</font></a</tr>");



});

function deltr(index){
   
    var $table=$("#tabOrders tr");
    var len= $table.length;
    index=parseInt(index);
    if(index>len){
   
    return;
    }else {
    var newAmt=document.getElementById("newAmt");
        var newQty=document.getElementById("newQty");
        var $tr=$("tr[id='"+i+"']");
        if($tr.find("td").eq(4).find("input").eq(0).val()!=""){
        newQty.value= Subtr(newQty.value,$tr.find("td").eq(4).find("input").eq(0).val());
        }
        if($tr.find("td").eq(6).find("input").eq(0).val()!=""){
        newAmt.value= Subtr(newAmt.value,$tr.find("td").eq(6).find("input").eq(0).val());
        }
       
      
       
   
    　$("tr[id='"+(index)+"']").remove();
   
       for( var i= index+1;i<=len;i++){
             
       var listId=i-4;
       var $tr=$("tr[id='"+i+"']");
       $tr.find("td").eq(0).html(i-3);
           $tr.find("td").eq(1).find("input").eq(0).attr("name","ordersDtlList["+listId+"].ordSeqName") ;
       $tr.find("td").eq(2).find("input").eq(2).attr("name","ordersDtlList["+listId+"].catNo") ;
       $tr.find("td").eq(2).find("input").eq(0).attr("name","ordersDtlList["+listId+"].catName") ;
       $tr.find("td").eq(2).find("input").eq(1).attr("onclick","") ;
       $tr.find("td").eq(2).find("input").eq(1).unbind("click") ;
       $tr.find("td").eq(2).find("input").eq(1).bind("click",function (event){
       var target= event.target;
       var index=target.parentElement.parentElement.id;
       showCatNo(index)});
     
   
       $tr.find("td").eq(3).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddUnit") ;
       $tr.find("td").eq(4).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddQty") ;
       $tr.find("td").eq(4).find("input").eq(0).attr("onblur","");
       $tr.find("td").eq(4).find("input").eq(0).unbind("blur") ;
       $tr.find("td").eq(4).find("input").eq(0).bind("blur",function (event){
       var target= event.target;
      var index=target.parentElement.parentElement.id;
       getPrice(target,index)});
      
       $tr.find("td").eq(5).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddPrc") ;
       $tr.find("td").eq(5).find("input").eq(0).attr("onblur","");
       $tr.find("td").eq(5).find("input").eq(0).unbind("blur") ;
       $tr.find("td").eq(5).find("input").eq(0).bind("blur",function (event){
       var target= event.target;
       var index=target.parentElement.parentElement.id;
       getPrice(target,index)});
       $tr.find("td").eq(6).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddAmt") ;
       $tr.find("td").eq(6).find("input").eq(0).attr("onblur","");
       $tr.find("td").eq(6).find("input").eq(0).unbind("blur") ;
       $tr.find("td").eq(6).find("input").eq(0).bind("blur",function (event){
       var target= event.target;
       var index=target.parentElement.parentElement.id;
       getPrice(target,index)});
       $tr.find("td").eq(7).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddRemark") ;
       $tr.find("td").eq(7).find("input").eq(1).attr("onclick","") ;
       $tr.find("td").eq(7).find("input").eq(1).unbind("click") ;
       $tr.find("td").eq(7).find("input").eq(1).bind("click",function (event){
       var target= event.target;
      var index=target.parentElement.parentElement.id;
       showRemark(index)});
      
       $tr.find("td").eq(8).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddFund1") ;
       $tr.find("td").eq(9).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddFund1") ;
       $tr.find("td").eq(10).find("input").eq(0).attr("name","ordersDtlList["+listId+"].orddFund1") ;
       $tr.find("td").eq(11).html("<a href='javascript:void(0)' onclick='deltr("+(i-1)+")'><font color='blue'>删除</font></a>") ;
       $tr.attr("id",(i-1));
     
       }
      
     
    }
       }

<td align="left">
<table class="bt_TableOut_2"
onmouseover="this.className='bt_TableOrders';"
     id="newOrd"
onmouseout="this.className='bt_TableOut_2';">
<tr>
<td class="Bt_Add">
&nbsp;
</td>
<td width="78">
新增明细
</td>
</tr>
</table>
</td>


<table  class="OrderBodyTop" id="tabOrders"   width="100%" > <tr height="25">
<td class="OrderCellMR" align="center" width="40" rowSpan="2">&nbsp;
</td>
<td class="OrderCellTop" align="center" width="120" rowSpan="2">&nbsp; </td>
<td class="OrderCellTop" align="center" width="150" rowSpan="2"> &nbsp; </td>
<td class="OrderCellTop" align="center" width="48" rowSpan="2"> &nbsp; </td>
<td class="OrderCellTop" align="center" width="46" rowSpan="2"> &nbsp; </td>
<td class="OrderCellTop" align="center" width="170" colSpan="2"> &nbsp; </td>
<td class="OrderCellTop" align="center" width="105" colSpan="2" rowSpan="2"> &nbsp; </td>
<td class="OrderCellTop" align="center" colSpan="3" >&nbsp;</td>
<td class="OrderCellTop" align="center" width="100" rowSpan="2">
编辑
</td>
</tr>

<tr height="25">
<td class="OrderCell" align="center" width="80">&nbsp; </td>
<td class="OrderCell" align="center" width="95">&nbsp; </td>
<td class="OrderCell" align="center" width="60">&nbsp; </td>
<td class="OrderCell" align="center" width="60">&nbsp; </td>
<td class="OrderCell" align="center" width="70">&nbsp; </td>

</tr> <s:iterator value="ordersDtlList" status="sta" var="x">
    <tr height="25" id='${sta.count+2}' class="tr_3">
<td class="OrderCellBt"  width="40" align="center" class="OrderCellMR">
<s:property value="%{#sta.count}"/>
</td>
<td class="OrderCellItem" align="center"><s:textfield name="ordersDtlList[%{#sta.index}].ordSeqName" onblur="validatMaxLength(this,50)"  cssClass="NoneBorder"  cssStyle="WIDTH: 100px; HEIGHT: 18px; TEXT-ALIGN: left"/>
</td>
<td class="OrderCellItem" align="center">
<s:textfield name="ordersDtlList[%{#sta.index}].catName"  readonly ="true" cssClass="NoneBorder"  cssStyle="WIDTH: 110px; HEIGHT: 18px; TEXT-ALIGN: left"/><input class="helpbutton"  align="right" onclick="showCatNo('${sta.count+2}');" type="button"  ><s:hidden name="ordersDtlList[%{#sta.index}].catNo" />
</td>
<td class="OrderCellItem" align="center"><s:textfield name="ordersDtlList[%{#sta.index}].orddUnit" onblur="validatMaxLength(this,6)"  cssClass="NoneBorder"   cssStyle="WIDTH: 42px; HEIGHT: 18px; TEXT-ALIGN: center" />
</td>
<td class="OrderCellItem" align="center"><s:textfield name="ordersDtlList[%{#sta.index}].orddQty"   value="%{orddQty==0?'':orddQty}" onblur="getPrice(this,'%{#sta.count+2}')"  cssClass="NoneBorder"  cssStyle="WIDTH: 45px; HEIGHT: 18px; TEXT-ALIGN: right" />
</td>
<td class="OrderCellItem" align="center">
<s:textfield name="ordersDtlList[%{#sta.index}].orddPrc" value="%{orddPrc==0?'':orddPrc}" cssClass="NoneBorder"  onblur="getPrice(this,'%{#sta.count+2}')"  cssStyle="WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: right"/>
</td>
<td class="OrderCellItem" align="center" ><s:textfield name="ordersDtlList[%{#sta.index}].orddAmt"  readonly="true" value="%{orddAmt==0?'':orddAmt}"  onblur="getPrice(this,'%{#sta.count+2}')" cssClass="NoneBorder" cssStyle="WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: right" />
</td>
<td class="OrderCellItem" align="center" colSpan="2"><s:textfield name="ordersDtlList[%{#sta.index}].orddRemark" cssClass='NoneBorder' cssStyle="WIDTH: 40px; HEIGHT: 18px; TEXT-ALIGN: left"/><input type='button' style='WIDTH: 20px; BACKGROUND-COLOR: #e0e3ea' onclick="showRemark('${sta.count+2}')" value='...' >
</td>
<td class="OrderCellItem" align="center" ><s:textfield name="ordersDtlList[%{#sta.index}].orddFund1" cssClass='NoneBorder'  value="%{orddFund1==0?'':orddFund1}"  cssStyle="WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left"/>
</td>
<td class="OrderCellItem" align="center" ><s:textfield name="ordersDtlList[%{#sta.index}].orddFund3" cssClass='NoneBorder' value="%{orddFund3==0?'':orddFund3}"  cssStyle="WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left"/>
</td>
<td class="OrderCellItem" align="center" ><s:textfield name="ordersDtlList[%{#sta.index}].orddFund5" cssClass='NoneBorder' value="%{orddFund5==0?'':orddFund5}"  cssStyle="WIDTH: 60px; HEIGHT: 18px; TEXT-ALIGN: left"/>
</td>
<td class='OrderCellItem' align='center'> <a href='javascript:void(0)' onclick='deltr("${sta.count+2}")'><font color="blue">删除</font></a>
</td>

</tr>
</s:iterator>
</table>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.