需要动态创建文本框而不丢失样式
本文关键字：样式 动态 创建 文本 | 更新日期: 2023-09-27 18:15:56
在我的表单中，我有一个文本框，可以放置一个整数，通过单击它旁边的按钮，它应该动态地创建许多文本框作为一个表。其jQuery代码为:
$("#ContentPlaceHolder1_LnkBtnNoofItems").click(function () {
$(".white-table-view-block").removeClass("hide");
$("#Table-id-Name").removeClass("hide");
$("#Table-id-Name").each(function () {
var NumbRow = $("#txtNoofItems").val();
var htmlvar = '';
for (i = 0; i < NumbRow; i++) {
htmlvar += '<tr>';
htmlvar += '<td class="blanck-space"> </td>';
htmlvar += '<td class="item-number"><input type="text" id="item_number_input' + i + '" class="form-control" placeholder="Number" /></td>';
htmlvar += '<td class="item-description"><input type="text" id="item_des_input' + i + '" class="form-control" placeholder="Number" /></td>';
htmlvar += '<td class="item-quantity"><input type="text" id="item_quantity_input' + i + '" class="form-control" placeholder="Pieces" /></td>';
htmlvar += '<td class="item-cost"><input type="text" id="item_cost_input' + i + '" class="form-control" placeholder="$" /></td>';
htmlvar += '<td class="item-value"><input type="text" id="item_total_input' + i + '" class="form-control" placeholder="$" /></td>';
htmlvar += '<td class="item-action"><a href="javascript:;" id="item_action_btn' + i + '" class="delet-icon"><img src="images/icon-delete.png" alt="" /></a></td>';
htmlvar += '</tr>';
}
$('.tbody-content').append(htmlvar);
$(".delet-icon").click(function () {
$(this).parents("tr").remove();
});
});
});文本框和链接按钮代码为:
<div class="col-md-4 col-lg-2">
<div class="number-of-item-block">
<div class="row">
<div class="col-md-12"><asp:label runat="server" ID="lblNoofItems" Text="No. of Item Rows"></asp:label></div>
<div class="col-md-12">
<asp:TextBox runat="server" class="form-control" id="txtNoofItems" placeholder="#" ></asp:TextBox> <asp:Linkbutton runat="server" ID="LnkBtnNoofItems" class="btn btn-dark-blue"><i class="glyphicon glyphicon-plus"></i></asp:Linkbutton>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
</div>
</div>
</div>但是应该生成的文本框是需要在服务器端工作的控件。请告诉我该怎么做。我以前没有这样做过，现在也不知道该怎么做。
谢谢,
Deepak
我想这可能对你有帮助。
$("#aAddMoreLicense").click(function () {
AddMoreKeyword();
return false;
});
//delete added Row or unwanted row
function DeleteLicense($aDelete) {
if ($(".tbl-Keyword tbody tr").length > 1) {
$($aDelete.closest("tr")).remove();
}
AllowDeleteFunctionality();
}
function AllowDeleteFunctionality() {
debugger
if ($(".tbl-Keyword tbody tr").length === 2) {
$(".tbl-Keyword tbody tr").each(function () {
if ($(this).attr("class") !== "hidden for-clone") {
$(this).find(".aDelete-Keyword").addClass("hidden");
}
});
}
else {
$(".tbl-Keyword tbody tr").each(function () {
if ($(this).attr("class") !== "hidden for-clone") {
$(this).find(".aDelete-Keyword").removeClass("hidden");
}
});
}
}
AddMoreKeyword();
function AddMoreKeyword() {
var rowIndex = $(".tbl-Keyword tbody tr").length;
var trItems = $(".tbl-Keyword tbody tr").eq(0).clone(true);
trItems.removeClass("hidden for-clone");
trItems.addClass("Keyword-row-" + rowIndex);
$("#txtSearchKeyword", trItems).val("");
$("#lblSrNo", trItems).addClass("Keyword-lbl-" + rowIndex);
$("#lblSrNo", trItems).text(rowIndex);
$("#txtSearchKeyword", trItems).addClass("Keyword-type-" + rowIndex);
$("#ddlDomainRank1", trItems).addClass("Keyword-no-" + rowIndex);
$(".tbl-Keyword tbody").append(trItems);
AllowDeleteFunctionality();
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" /></script>
<div class="main-box" style="border: none; box-shadow: none">
<div class="main-box-body clearfix Scroll">
<div class="col-lg-12" style="margin: 10px 0px;">
<span class="mandatory" id="spnlbl" style="font-weight: bold; font-size: 12pt">*</span>
</div>
<table class="table tbl-Keyword" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width: 3% !important;">
Keyword Sr#
</th>
<th style="width: 80% !important;">
<span>Keyword</span>
<span style="color: red">*</span>
</th>
<th style="width: 15% !important;">
<span >Rank</span>
<span style="color: red">*</span>
</th>
<th style="width: 3% !important;">
<span> Linked HRA</span>
</th>
<th style="width: 3% !important;">
Delete
</th>
</tr>
</thead>
<tbody>
<tr class="hidden for-clone">
<td style="width: 3%">
<span ID="lblSrNo" ></span>
</td>
<td style="width: 80% !important; padding: 5px 8px;" class="td">
<input type="hidden" id="hdfArtVideoId" />
<input type="hidden" id="hdfType" />
<input type="text" ID="txtSearchKeyword" CssClass="form-control" AutoCompleteType="Disabled" />
<div class="ac_keywordresults hidden" style="position: absolute; width: 300px; max-height: 184px; overflow: auto;">
</div>
</td>
<td style="width: 15% !important; padding: 5px 8px;">
<select ID="ddlDomainRank1" CssClass="form-control ddlRank" Style="padding: 6px 8px; float: left">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</td>
<td style="width: 3% !important; text-align: center">
<a onclick="LinkedHra(this);" class="aLContent-Keyword" style="color: #8bc34a !important; font-size: 25px" href="javascript:void(0);" title="Linked Content" target="_blank"><i class="glyphicon glyphicon-list-alt"></i></a>
</td>
<td style="width: 3% !important; text-align: center;">
<a onclick="DeleteLicense(this);" class="aDelete-Keyword" style="color: #8bc34a !important;" href="javascript:void(0);" title="Delete"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
<div class="col-md-12 form-group">
<a href="javascript:void(0);" id="aAddMoreLicense" class="lnk-morelic pull-right"><i class="glyphicon glyphicon-plus"></i> Add Keywords</a>
</div>
</div>
</div>