asp.net + Bootstrap动态表

时间:2018-03-13 16:28:38

标签: javascript jquery asp.net twitter-bootstrap

我正在尝试使用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 个答案:

答案 0 :(得分:0)

您必须添加select元素:

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