フォームに 2 つの行があり、4 回繰り返す必要があります。
それで、同時に8行を表示するのではなく、「行を追加」というボタンで最初の2行を表示することは可能ですか?
ユーザーがボタンをクリックすると、2 行が自動的に追加されます。
以下のコードでは、 ... で始まり ... で終わる各コードが 4 回表示されます。
2行は合計8回表示されます
行が常に満たされるとは限りません。したがって、ユーザーがボタンをクリックして、必要に応じてさらに 2 行を追加できるようにするとよいでしょう。
1行追加できる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>
モハメッドによって作成されたフィドルへのリンクは次のとおりです（感謝）
この例も見つけました：
http://jsfiddle.net/nick_craver/BE5Lr/
複製すると...
私は探しているものに近いです。問題は、もっとたくさんあることです..そして、どこから始めてどこで止まるかわからないでしょう。