Javascript 是否可以一次动态添加两行?

Javascript 是否可以一次动态添加两行?,javascript,jquery,asp.net,Javascript,Jquery,Asp.net,我的表格上有2行,必须重复4次 因此,与其同时显示8行,是否可以使用“添加其他行”按钮显示前2行 如果用户单击该按钮,将自动添加两行 从下面的代码中,每个以…开头并以…结尾的代码显示4次 这两行显示8次合并 这些行并不总是被填满。因此,如果需要的话,让用户点击一个按钮来添加额外的2行是很好的 我有一个js可以添加一行,但我不能让它同时添加2行 下面是代码如何与。。。我正在尝试自动添加外观 <script type='text/javascript'>//<![CDATA[

我的表格上有2行,必须重复4次

因此,与其同时显示8行,是否可以使用“添加其他行”按钮显示前2行

如果用户单击该按钮,将自动添加两行

从下面的代码中,每个以…开头并以…结尾的代码显示4次

这两行显示8次合并

这些行并不总是被填满。因此,如果需要的话,让用户点击一个按钮来添加额外的2行是很好的

我有一个js可以添加一行,但我不能让它同时添加2行

下面是代码如何与。。。我正在尝试自动添加外观

<script type='text/javascript'>//<![CDATA[
    $(window).load(function () {
        var index = 1;
        $(document).ready(function () {
            $("#more").click(function () {
                addRow(1)
                //alert($("#form1").html()); Uncomment to view updated form html
            });
        });


        function addRow(rowCount) {
            for (i = 0; i < rowCount; i++) {
                index = index + 1;
                $("#form1").append($("#template").html().replace(/_1/g, "_" + index));
            }
        }

    });//]]>  

</script>

      <div id="template">
                  <table border="1" bordercolor="black" cellspacing="0">
            <tr>
            <td>

      <table style="border-top-width:2px;border-top-style:solid;border-top-color:#000000">
            <tr valign="top">
                 <td valign="middle" style="font-size:large;font-weight:bold;" class="style4"></td>
                <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Line #<br />
                    <asp:TextBox ID="TextBox24" runat="server" Width="25px" />
                </td>
                <td style="width:135px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Code<br />
                     <asp:TextBox ID="TextBox38" runat="server" Width="25px" />
                </td>
                 <td style="width:125px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Document Reference<br />
                    <asp:TextBox ID="TextBox25" runat="server" Width="45px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Line<br />
                    <asp:TextBox ID="TextBox26" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    PC COMM LN<br />
                    <asp:TextBox ID="TextBox27" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Vendor Invoice #<br />
                    <asp:TextBox ID="TextBox28" runat="server" Width="85px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                  Fund<br />
                      <asp:DropDownList id="txtfund" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Agency<br />
                      <asp:DropDownList id="txtagency" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Org.<br />
                     <asp:DropDownList id="txtorg" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Sub<br />
                    <asp:TextBox ID="TextBox32" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Activity<br />
                    <asp:TextBox ID="TextBox33" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Object<br />
                    <asp:TextBox ID="TextBox34" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Sub<br />
                    <asp:TextBox ID="TextBox35" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Rev Source<br />
                    <asp:TextBox ID="TextBox36" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;">
                    Sub<br />
                    <asp:TextBox ID="TextBox37" runat="server" Width="25px" />
                </td>
            </tr>
        </table>   

        <table style="border-top-width:2px;border-top-style:solid;border-top-color:#000000">
            <tr valign="top">
                 <td valign="middle" style="font-size:large;font-weight:bold;" class="style4"></td>
                <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />Job #<br />
                    <asp:TextBox ID="TextBox39" runat="server" Width="45px" />
                </td>
                <td style="width:135px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br />
                    Rept<br />Category<br />
                     <asp:TextBox ID="TextBox40" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />BS Acct<br />
                    <asp:TextBox ID="TextBox41" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   <br /><br /> DISC<br />
                    <asp:TextBox ID="TextBox42" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br />Description (30) Spaces<br />
                    <asp:TextBox ID="TextBox403" runat="server" onKeyUp="javascript:Count(this,30);" onChange="javascript:Count(this,30);" TextMode="MultiLine" Columns="30" Rows="2" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />Quant.<br />
                    <asp:TextBox ID="TextBox44" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   <br /><br /> Amount<br />
                    <asp:TextBox ID="TextBox45" runat="server" Width="55px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Inc<br />/<br />Dec<br />
                    <asp:TextBox ID="TextBox46" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;">

                    P<br />/<br />F<br />
                    <asp:TextBox ID="TextBox47" runat="server" Width="25px" />
                </td>
            </tr>
        </table>   
        </td>
        </tr>
        </table>        
        </div>

      <a href="#" id="more">Add More Rows</a>
     <div class="noprint" style="border-top-width:2px;border-top-style:solid;border-top-color:#000000"">
            <asp:Button runat="server" ID="btnSAP" Text="Save" OnClientClick=" return validate()" />
             <asp:Button ID="btnClear" OnClick="ClearFilter" height="27px" Text="Reset" runat="server" class="btn" /> 
            <asp:Button runat="server" ID="btnCancel" Text="Exit Form" />
             <!-- Results -->
            <asp:Label ID="lblResult" style ="font-weight:bold; font-size:large" runat="server"></asp:Label>
      </div>
   </form>
//
行#

看看这把小提琴: 应该会有帮助的

<div id="template">
                  <table border="1" bordercolor="black" cellspacing="0">
            <tr>
            <td>

      <table style="border-top-width:2px;border-top-style:solid;border-top-color:#000000">
            <tr valign="top">
                 <td valign="middle" style="font-size:large;font-weight:bold;" class="style4"></td>
                <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Line #<br />
                    <asp:TextBox ID="TextBox24" runat="server" Width="25px" />
                </td>
                <td style="width:135px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Code<br />
                     <asp:TextBox ID="TextBox38" runat="server" Width="25px" />
                </td>
                 <td style="width:125px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Document Reference<br />
                    <asp:TextBox ID="TextBox25" runat="server" Width="45px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Line<br />
                    <asp:TextBox ID="TextBox26" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    PC COMM LN<br />
                    <asp:TextBox ID="TextBox27" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Vendor Invoice #<br />
                    <asp:TextBox ID="TextBox28" runat="server" Width="85px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                  Fund<br />
                      <asp:DropDownList id="txtfund" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Agency<br />
                      <asp:DropDownList id="txtagency" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Org.<br />
                     <asp:DropDownList id="txtorg" runat="server"></asp:DropDownList>
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Sub<br />
                    <asp:TextBox ID="TextBox32" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Activity<br />
                    <asp:TextBox ID="TextBox33" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Object<br />
                    <asp:TextBox ID="TextBox34" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    Sub<br />
                    <asp:TextBox ID="TextBox35" runat="server" Width="25px" />
                </td>
                 <td style="width:115px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Rev Source<br />
                    <asp:TextBox ID="TextBox36" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;">
                    Sub<br />
                    <asp:TextBox ID="TextBox37" runat="server" Width="25px" />
                </td>
            </tr>
        </table>   

        <table style="border-top-width:2px;border-top-style:solid;border-top-color:#000000">
            <tr valign="top">
                 <td valign="middle" style="font-size:large;font-weight:bold;" class="style4"></td>
                <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />Job #<br />
                    <asp:TextBox ID="TextBox39" runat="server" Width="45px" />
                </td>
                <td style="width:135px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br />
                    Rept<br />Category<br />
                     <asp:TextBox ID="TextBox40" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />BS Acct<br />
                    <asp:TextBox ID="TextBox41" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   <br /><br /> DISC<br />
                    <asp:TextBox ID="TextBox42" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br />Description (30) Spaces<br />
                    <asp:TextBox ID="TextBox403" runat="server" onKeyUp="javascript:Count(this,30);" onChange="javascript:Count(this,30);" TextMode="MultiLine" Columns="30" Rows="2" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                    <br /><br />Quant.<br />
                    <asp:TextBox ID="TextBox44" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   <br /><br /> Amount<br />
                    <asp:TextBox ID="TextBox45" runat="server" Width="55px" />
                </td>
                 <td style="width:105px;border-right-width:2px;border-right-style:solid;border-right-color:#000000">
                   Inc<br />/<br />Dec<br />
                    <asp:TextBox ID="TextBox46" runat="server" Width="25px" />
                </td>
                 <td style="width:105px;">

                    P<br />/<br />F<br />
                    <asp:TextBox ID="TextBox47" runat="server" Width="25px" />
                </td>
            </tr>
        </table>   
        </td>
        </tr>
        </table>        
        </div>

<table id="sometable">
<tbody>
</tbody>
</table>
<table id="anothertable">
<tr>
<td> some other table </td>
</tr>
</table>
      <a href="#" id="more">Add More Rows</a>
     <div class="noprint" style="border-top-width:2px;border-top-style:solid;border-top-color:#000000"">

      </div>
<input type="submit" value="Save" />
      <input type="reset" value="Reset" />
   </form>

行#

请提供最少的例子。我相信这很容易,但我不能理解你的问题,因为你有一个很长的问题,请直接用最少的代码例子。附言:我已经为您创建了一个JSFIDLE,请对它进行样式化和修改,并在您的问题中提供链接谢谢您Mohammed。我添加了一些样式。你想让我添加更多的html代码吗?还有很多,但我只是展示了两个表。关于stackoverflow的答案应该是独立的。在这里添加您的答案并链接到一个提琴。感谢达摩维辛的帮助。我最大的问题是我有几张桌子。。。。但是,我只想在其中的两个表上添加两行。我怎样才能在不复制所有表格的情况下做到这一点呢?Mathletics,我不知道你的评论是否是针对我的,但如果你读了Mohammed的评论,他要求我在我的问题中添加该链接。嗨,达尔玛维辛,我能够稍微修改你的评论,使其生效。然而,我仍然有一个主要问题。它不在现有行的正下方添加这两行,而是将其添加到“保存”按钮的外部。我想发布我目前使用的全部代码,但我要等到我得到批准。再次感谢。@Mathletics我理解你想要解释的内容,但有时候一个小提琴链接就意味着一切,我只是想帮你。关键是当一个人想要帮助,却没有太多时间来描述/写下他试图解释的东西时——在这种时候,一个小提琴链接就行了。。!不管这是否是stackoverflow的规则,我会注意的,如果你能将我重定向到一个链接,在那里我可以阅读stackoverflow的所有注意事项,我会非常感激。
<script type="text/javascript">
var index = 1;
        $(document).ready(function () {
            $("#more").click(function () {
                addRow(1);
                //alert($("#form1").html()); Uncomment to view updated form html
            });
        });


        function addRow(rowCount) {
            for (i = 0; i < rowCount; i++) {
                index = index + 1;
$("#sometable").append($("#template").html().replace(/_1/g, "_" + index));
            }
        }
</script>