如何在 jquery 中创建 editable table 列

Question

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    var table = "<table id='tblItemList'>" +
                   "<tr>" +
                       "<th style='width:20px;'>&nbsp;</th>" +
                       "<th style='width:100px;'><b>ItemId</b></th>" +
                       "<th style='width:100px;'><b>Item</b></th>" +
                       "<th style='width:100px;'><b>Quantity</b></th>" +
                   "</tr>";

    $("#ddlItemID").dropdownchecklist({forceMultiple: true , onComplete: function (selector) {
    var values = "";
    for (i = 0; i < selector.options.length; i++) {
        if (selector.options[i].selected && (selector.options[i].value != "")) {
            if (values != "") values += ";";
            values += selector.options[i].value;

            var chkId = 'chkId' + i;
            var itemId = 'itemId' + i;
            var ItemName = 'ItemName' + i;
            var qty = 'qty' + i;

            var itemData = "<tr>" +
                           "<td><input type='checkbox' id='" + chkId + "' /></td>" +
                           "<td id='" + itemId + "' class='selectedItemId'>" + selector.options[i].value + "</td>" +
                           "<td id='" + ItemName + "' class='selectedItemName'>" + selector.options[i].text + "</td>" +
                           "<td id='" + qty + "' class='selectedItemQty'>" + 0 + "</td>" +
                       "</tr>";
            table += itemData;
        }
    }

    table += "</table>";
    $("#trItemsList").show();
    $("#trItemsList").html(table);
}
, onItemClick: function (checkbox, selector) {
    var justChecked = checkbox.prop("checked");
    var checkCount = (justChecked) ? 1 : -1;
    for (i = 0; i < selector.options.length; i++) {
        if (selector.options[i].selected) checkCount += 1;
    }
    if (checkCount > 3) {
        alert("Limit is 3");
        throw "Too many items were selected";
    }
}
    });
});
</script>

我有上面的 jQuery 代码，它从支持多个 select 的下拉列表中创建 table 列表项 select。

用户在下拉列表中编辑了 select 项后，在 onComplete 时，会在下拉列表下方创建一个 "mini" table，其中包含用户 select 编辑的项.

目前，创建的 table 是只读的，但我想要实现的是用户继续并更新创建的 table 最后一列（数量），每个列都有一个数值table 中的项目（行）。

例如，如果我从下拉列表中 select 编辑 Item_one、Item_five 和 Item_twenty，将创建一个包含 3 行的 table。在 table 中，我将具有 Item_ID 和 Item_Name 的值。现在我希望能够编辑 table 并针对每一行输入 Item_Quantity，之后我将最终保存到数据库中。

有没有人知道如何修改上述代码，使创建的 table 具有用户可以更新的 editable 第三列（数量）？

下面是下拉列表html

<td>
@Html.DropDownList("ddlItemID", ViewBag.GatePassItemsList as SelectList, new { @multiple = "multiple" })
</td>

Answer 1

好的，你开始吧！

只需将 itemData 中的最后一个 td 替换为以下

'<td id="' + qty + '" class="selectedItemQty"><input type="text" placeholder="Enter quantity" id="txt_'+qty+'"></td>'

就是这样。

如果您遇到任何问题，请告诉我！！

如何在 jquery 中创建 editable table 列

How can i create an editable table column in jquery

html

javascript

asp.net-mvc

jquery

asp.net-mvc-4