【发布时间】：2019-01-09 08:02:09
【问题描述】：
我有一个包含一些 JSON 数据的 HTML 表，我想将我的列之一设为 editable，例如在用户单击或双击时，该单元格应该是可编辑的
我不知道如何实现这一目标。
在谷歌上搜索我发现<td contenteditable='true'></td> 使用它我可以使单元格可编辑但动态我不知道如何使用它
片段
$(document).ready(function() {
var tableData = [{
"Category Code": "C001",
"Category Name": "Beverages",
"Quantity": "3174.0000"
},
{
"Category Code": "C003",
"Category Name": "Juices",
"Quantity": "36.0000"
},
{
"Category Code": "C004",
"Category Name": "Soups",
"Quantity": "5.0000"
},
{
"Category Code": "C005",
"Category Name": "Cookies",
"Quantity": "10.0000"
},
{
"Category Code": "C006",
"Category Name": "Buns",
"Quantity": "258.0000"
},
{
"Category Code": "C007",
"Category Name": "Breads",
"Quantity": "184.0000"
},
{
"Category Code": "C008",
"Category Name": "Rusks",
"Quantity": "62.0000"
},
{
"Category Code": "C009",
"Category Name": "Biscuits",
"Quantity": "55.0000"
},
{
"Category Code": "C010",
"Category Name": "Puff",
"Quantity": "53.0000"
},
{
"Category Code": "C011",
"Category Name": "Savouries",
"Quantity": "343.2500"
},
{
"Category Code": "C012",
"Category Name": "Cake",
"Quantity": "19.0000"
}
]
function addTable(tableValue) {
var col = Object.keys(tableValue[0]);
var countNum = col.filter(i => !isNaN(i)).length;
var num = col.splice(0, countNum);
col = col.concat(num);
var table = document.createElement("table");
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th"); // TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
tr.classList.add("text-center");
tr.classList.add("head")
}
for (var i = 0; i < tableValue.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
var tabledata = tableValue[i][col[j]];
if (tabledata && !isNaN(tabledata)) {
tabledata = parseInt(tabledata).toLocaleString('en-in')
}
if (tableData[i]['Quantity'] === tableData[i][col[j]]) {
//i want to make this cell editable
tabCell.innerHTML = tabledata;
} else {
span = document.createElement("span");
span.innerHTML = tabledata;
tabCell.appendChild(span)
}
if (j > 1)
tabCell.classList.add("text-right");
}
}
var divContainer = document.getElementById("HourlysalesSummary");
divContainer.innerHTML = "";
divContainer.appendChild(table);
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
}
addTable(tableData);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<table id="HourlysalesSummary"></table>我想让Quantity 列数据可编辑
请问这里的任何人如何用一些好的方法来指导我会非常有帮助。
【问题讨论】：
-
一种非常常用的技术是在单元格内有一个不可见的输入字段，然后在需要时显示/隐藏它。否则，您在某些 html 标记上也有
contenteditable属性 -
现在阅读。看起来有人已经为您提供了该示例，所以不需要它:)
标签： javascript jquery html