是否可以一次动态添加2行？
我的表单上有2行，必须重复4次。
因此，不是同时显示8行，而是可以使用一个显示“添加其他行”的按钮显示前两行
如果用户点击该按钮，则会自动添加2行。
从下面的代码中，每个代码以...开头并以4次显示结束。
2行显示8次组合
行并不总是被填满。因此，如果需要，让用户单击按钮添加额外的2行将是很好的。
我有一个可以添加一行的js，但我不能同时添加它。
以下是代码如何...我试图自动添加看起来像。
<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/
如果我复制......
我接近我正在寻找的东西。问题是我还有更多......并且不知道从哪里开始和停止。
1 个答案:
答案 0 :(得分：-1)
在这里看看这个小提琴： http://jsfiddle.net/dharmavir/9nHbs/ 它应该有帮助。！
<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>
Javascript代码：
<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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？