I have 2 rows on our form that must be repeated 4 different times.
So, rather than show 8 rows, at same time, is it possible to show first 2 rows with a button that says, “Add additional rows”
If a user clicks the button, 2 rows are automatically added.
From the code below, each code beginning with …and ends with displays 4 times.
The 2 rows display 8 times combined
The rows don’t always get filled. So, it will be nice to have the users click a button to add additional 2 rows if needed.
I have a js that can add one row but I can’t get it to add 2 at same time.
Here is how the code with … I am trying to add automatically looks like.
<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>
Here is a link to fiddle created by Mohammed(thanks)
I also found this example:
http://jsfiddle.net/nick_craver/BE5Lr/
If I duplicate the …
I am close to what I am looking for. Problem is I have many more .. and wouldn’t know where to start and stop.
Take a look at this fiddle here:
http://jsfiddle.net/dharmavir/9nHbs/
it should help.!
Javascript code: