如何在`<td>`标签中传递变量？

Question

我是 jQuery 的新手。我基本上想将带有 20 个选项的 <select> 下拉列表传递给 <td>，然后将其添加到名为 cols 的变量中。

$(document).ready(function () {
    var counter = 1;
    $("#addrow").on("click", function () {
        if (counter < 16) {
            var newRow = $("<tr>");
            var cols = "";
            var selectList = "<select name="itemQuantity' + counter + '">";
            for (var x = 0; x < 20; x++) {
                selectList += "<option>" + x + "</option>";
            }
            selectList += "</select>";
            cols += '<td><input type="text" class="form-control" name="itemName' + counter + '"/></td>';
            cols += '<td>selectList</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
    });

});

我基本上希望最终结果能够生成完全像这样的行：https://i.imgur.com/9blXTlw.jpg 每次我按“添加项目”时。该行目前存在某种错误：cols += '<td>selectList</td>' 您可以看到我正在尝试完成的逻辑。如何在此处正确传递变量 selectList？

Answer 1

您需要更改以下几行：

var selectList = "<select name="itemQuantity' + counter + '">";
cols += '<td>selectList</td>';

到

var selectList = "<select name='itemQuantity ' + counter + ' '>";
cols += '<td>' + selectList + '</td>';