`

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>
分享到：
| js动态增加行
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery动态添加删除行 点击按钮动态添加行或动态删除行

    jquery动态添加删除行 点击按钮动态添加行或动态删除行代码 删除后序号重新排列

    jquery动态添加删除(tr/td)

    在介绍jQuery动态添加删除表格行（tr）和单元格（td）的过程中，首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，对于Web开发人员来...

    jquery案例，为表格动态添加行

    要使用jQuery动态添加行，我们可以先创建一个新的`&lt;tr&gt;`元素，然后在其中填充`&lt;td&gt;`元素，最后将其插入到表格中。以下是一个基本的添加行示例： ```javascript // 创建新行 var newRow = $("&lt;tr&gt;&lt;td&gt;新数据1&lt;/td&gt;...

    jQuery 动态添加或删除表格行

    添加行 初始数据 ``` ```javascript $(document).ready(function() { var rowNum = 1; $('#addRow').click(function() { rowNum++; var newRow = $('&lt;tr&gt;'); var cols = '新数据' + rowNum + '...

    jquery动态添加 删除指定行元素

    首先，我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中，`add()`函数正是执行这个任务的。函数首先通过`$("#表格 id")`获取到指定ID的表格...

    74、jquery表格动态添加删除行代码

    &lt;title&gt;jQuery动态添加删除行 &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; 姓名 年龄 操作 张三 &lt;td&gt;25 &lt;td&gt;&lt;button class="delete"&gt;删除&lt;/button&gt;&lt;/td&gt; ...

    jquery表格动态添加删除行代码.zip

    在动态添加行时，`.append()`会被用来将新的行元素插入到表格中；而在删除行时，`.remove()`则用于移除选定的行。 5. **动态创建元素**：在添加行时，通常需要创建新的`&lt;tr&gt;`元素，并填充相应的`&lt;td&gt;`。这可以通过...

    jquery动态控制表格的行

    在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...

    ajax jquery 自动增加行

    在“ajax jquery 自动增加行”的场景下，我们通常是在一个表格中动态添加行。例如，用户填写完一表格行的信息后，点击“添加”按钮，新行会立即出现在表格底部，而无需刷新整个页面。以下是实现这一功能的基本步骤：...

    jQuery实现动态添加、删除按钮及input输入框的方法

    通过本篇文章，我们将学习如何使用jQuery实现动态添加和删除按钮及input输入框的方法，同时还将涉及到事件响应和页面元素动态操作的相关技巧。 首先，我们需要注意的是，当页面加载完毕后，jQuery的$(document)....

    JQuery实现可以动态增加行的报表

    JQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件处理和动画等功能，使得实现动态增加行的报表变得更为简便。下面将详细阐述如何使用 JQuery 实现这一功能。 首先，我们需要创建一个基本的 HTML ...

    jquery 动态添加控件

    本篇文章将深入探讨如何使用jQuery动态添加控件，包括元素的创建、插入和绑定事件，以及在实际项目中的应用。 首先，我们来了解jQuery如何创建新的HTML元素。在JavaScript中，创建元素通常是通过`document....

    使用jquery给指定的table动态添加一行、删除一行

    支持在任意行添加一行且可配置的，如可在第一行添加一行、第二行添加一行、倒数第一行添加一行、倒数第二行添加一行，随需求的变化都不会影响。 前提条件：行数需在表中存在否则添加不成功。 2）、删除一行 支持动态...

    jquery动态添加删除行

    **添加行：** `append()`函数是jQuery中的一个方法，用于在元素末尾添加新的内容。在表格中添加新行，我们可以先创建一个新的`&lt;tr&gt;`元素，然后在其中填充`&lt;td&gt;`元素，最后使用`append()`将其添加到`&lt;tbody&gt;`元素中...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格（table）中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库，它简化了DOM操作，包括在表格中动态修改内容。 首先，我们要理解HTML表格的基本结构，一个...

    jQuery表格添加行数据代码.zip

    在这个"jQuery表格添加行数据代码"中，我们主要关注的是如何利用jQuery来动态地向表格中添加、编辑和删除行数据。这个压缩包包含了一些关键文件，如CSS样式文件、HTML页面、JavaScript脚本以及说明文件。 首先，`...

    jQuery+ajax实现动态添加表格tr td功能示例

    本文将详细解析使用jQuery和ajax技术来实现动态添加表格行（tr）和单元格（td）功能的方法。 #### 1. 理解jQuery和ajax技术 **jQuery**是一个快速、简洁的JavaScript库，它封装了许多常用的功能，简化了JavaScript...

    jquery动态添加表单

    总结起来，jQuery动态添加表单涉及的主要知识点包括：引入jQuery库、创建和操作DOM元素、绑定事件处理程序以及处理表单提交。这些技术在现代Web开发中是不可或缺的，尤其是对于需要动态交互和实时更新的网页应用。

    jquery 动态增加删除表格. 实例

    至此，我们已经实现了jQuery动态增加和删除表格行的基本功能。用户可以通过点击添加按钮向表格中插入新的行，每个行都有一个删除按钮，点击后将移除对应的行。这种交互方式在数据输入、编辑或展示时非常有用，提高了...

Magicbox
Global site tag (gtag.js) - Google Analytics