如何在 jquery 中创建可编辑的表列
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代码,它创建了一个表,列出了从支持多选的下拉列表中选择的项目。
用户在下拉列表列表中选择项目后,在 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>'
就是这样。
如果您遇到任何问题,请告诉我!!
相关文章:
- Rails Production-可以工作,但不能编辑/删除/创建记录
- 如何在 jquery 中创建可编辑的表列
- 如何使用 javascript 创建和编辑 excel 文件
- 如何在Jquery中使用kendo ui创建内联网格编辑
- 编辑图像而不创建新图像
- 如何在函数之后编辑它's已创建
- 单击动态创建的编辑按钮不起作用
- 使用html/php编辑动态创建的结果集
- JAVASCRIPT - 在动态创建的编辑框中拦截键码 13(输入)并将元素传递给不同的函数
- 如何在创建编辑器函数中获取行索引
- 如何在内容可编辑或其他地方找到通过自动换行创建的换行符
- 如何创建动态文本并使用 KineticJS 对其进行编辑.任何可以说明的例子都会很棒
- 在 JS 中创建、编辑和保存 XML
- 在单击后创建输入时,是否可以准确地在单击发生的位置开始编辑输入
- 编辑尝试使用 OOP 在 js 中创建库
- 在可连接的元素内创建一个不可编辑的块
- Rally sdk 2实用程序用于创建指向详细信息页面/编辑弹出窗口的链接
- THREE.js 使用 sceneLoader 加载由 THREE.js 编辑器创建的场景时出现异常
- 创建跨浏览器可编辑的 iframe
- 除了在 AngularJS 中为每种类型的编辑创建一个函数之外,有没有更好的方法可以在页面上拥有可编辑的元素