asp.net + Bootstrap 动态表
Posted
技术标签:
【中文标题】asp.net + Bootstrap 动态表【英文标题】：asp.net + Bootstrap dynamically table 【发布时间】：2018-08-22 00:11:46 【问题描述】：我正在尝试构建一个选项，以使用 bootstrap 和 asp.net 在表中添加和删除行。但是，我在动态添加 DropDownList 时遇到了问题。
我的看法：
<body>
<div class="container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<th>Payment Category</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-3">
@html.DropDownListFor(m => m.SelectedPaymentCategory, Model.PaymentCategories, "Select a Category", new
@class = "form-control"
)
</td>
<td class="col-sm-2">
<input type="number" name="amount" class="form-control" />
</td>
<td class="col-sm-2">
<input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete">
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr></tr>
</tfoot>
</table>
</div>
</body>
该模型是获取付款类别的简单查询。 然后，我有一个JS来添加和删除表中的行：
$(document).ready(function ()
var counter = 0;
$("#addrow").on("click", function ()
var newRow = $("<tr>");
var cols = "";
// HERE IS MY ISSUE. HOW CAN I CREATE THE DropDownList
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="number" class="form-control" name="amount' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
);
$("table.order-list").on("click", ".ibtnDel", function (event)
$(this).closest("tr").remove();
counter -= 1
);
);
function calculateRow(row)
var price = +row.find('input[name^="price"]').val();
function calculateGrandTotal()
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function ()
grandTotal += +$(this).val();
);
$("#grandtotal").text(grandTotal.toFixed(2));
一切正常，但我不知道如何在 JS 中创建 DropDownList。有没有更好的方法？
谢谢
【问题讨论】：
【参考方案1】：你必须添加一个select 元素：
cols += '<td><select> \
<option value=“option1”>option1</option> \
<option value=“option2”>option2</option> \
</select></td>';
【讨论】：
但是选项是由模型创建的。它们并不总是相同的硬编码 您可以通过编程方式修改选项标签中的任何内容，并根据需要添加更多内容。 哼...我如何“知道”获取选项内容？它在我的模型中（MVC） 您必须使用返回 ddl 值的方法创建一个 WebService。然后使用 AJAX 在 javascript 中获取这些值。 嗯...我是新手。我不知道“ddl 值”以上是关于asp.net + Bootstrap 动态表的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap Style & Surrounding Div tag from ASP.NET Code Behind [重复]
Asp.Net Mvc通用后台管理系统,bootstrap+easyui+权限管理+ORM