[英]How can i create an editable table column in jquery
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var table = "<table id='tblItemList'>" +
"<tr>" +
"<th style='width:20px;'> </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代碼創建了一個表格,該表格列出了從支持多種選擇的dropdownchecklist中選擇的項目。
用戶在下拉列表中選擇項目之后,在onComplete上,下拉列表的正下方會創建一個“迷你”表,其中包含用戶選擇的項目。
當前,創建的表是只讀的,但是我要實現的是用戶繼續進行操作,並使用表中每個項目(行)的數值更新創建的表的最后一列(數量)。
例如,如果我從下拉列表中選擇Item_one,Item_five和Item_twenty,則將創建3行的表。 在該表中,我將具有Item_ID和Item_Name的值。 現在,我希望能夠編輯該表並針對每一行輸入Item_Quantity,之后,我最終將其保存到數據庫中。
有沒有人可以修改上面的代碼,使創建的表具有可編輯的第三列(數量),用戶可以更新?
以下是下拉列表的html
<td>
@Html.DropDownList("ddlItemID", ViewBag.GatePassItemsList as SelectList, new { @multiple = "multiple" })
</td>
好吧,你去!
Jus用下面的內容替換了itemData中的最后一個td
'<td id="' + qty + '" class="selectedItemQty"><input type="text" placeholder="Enter quantity" id="txt_'+qty+'"></td>'
而已。
讓我知道您是否遇到任何問題!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.