asp.net + Bootstrap 动态表答案

【问题标题】：asp.net + Bootstrap dynamically tableasp.net + Bootstrap 动态表
【发布时间】：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。有没有更好的方法？

谢谢

【问题讨论】：

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

你必须添加一个select 元素：

cols += '<td><select> \
        <option value=“option1”>option1</option> \
        <option value=“option2”>option2</option> \
    </select></td>';

【讨论】：

但是选项是由模型创建的。它们并不总是相同的硬编码
您可以通过编程方式修改选项标签中的任何内容，并根据需要添加更多内容。
哼...我如何“知道”获取选项内容？它在我的模型中（MVC）
您必须使用返回 ddl 值的方法创建一个 WebService。然后使用 AJAX 在 JavaScript 中获取这些值。
嗯...我是新手。我不知道“ddl 值”