Javascript 如何使Html表格列可编辑？

我有一个包含一些JSON数据的HTML表，我想让我的一列

可编辑

，就像在用户单击或双击时，该单元格应该是可编辑的

我不知道怎样才能做到这一点。 在谷歌上搜索时，我发现

使用它我可以使单元格可编辑，但动态地我不知道如何使用它

片段

$（文档）.ready（函数（）{
var表格数据=[{
“类别代码”：“C001”，
“类别名称”：“饮料”，
“数量”：“3174.0000”
},
{
“类别代码”：“C003”，
“类别名称”：“果汁”，
“数量”：“36.0000”
},
{
“类别代码”：“C004”，
“类别名称”：“汤”，
“数量”：“5.0000”
},
{
“类别代码”：“C005”，
“类别名称”：“Cookies”，
“数量”：“10.0000”
},
{
“类别代码”：“C006”，
“类别名称”：“面包”，
“数量”：“258.0000”
},
{
“类别代码”：“C007”，
“类别名称”：“面包”，
“数量”：“184.0000”
},
{
“类别代码”：“C008”，
“类别名称”：“Rusks”，
“数量”：“62.0000”
},
{
“类别代码”：“C009”，
“类别名称”：“饼干”，
“数量”：“55.0000”
},
{
“类别代码”：“C010”，
“类别名称”：“泡芙”，
“数量”：“53.0000”
},
{
“类别代码”：“C011”，
“品类名称”：“风味”，
“数量”：“343.2500”
},
{
“类别代码”：“C012”，
“类别名称”：“蛋糕”，
“数量”：“19.0000”
}
]
函数addTable（tableValue）{
var col=Object.keys（tableValue[0]）；
var countNum=col.filter（i=>！isNaN（i））.length；
var num=列拼接（0，countNum）；
col=col.concat（num）；
var table=document.createElement（“表”）；
var tr=table.insertRow（-1）；//表行。
对于（变量i=0；i1）
tabCell.classList.add（“文本右键”）；
}
}
var divContainer=document.getElementById（“HourlysalesSummary”）；
divContainer.innerHTML=“”；
divContainer.appendChild（表）；
表.classList.add（“表”）；
table.classList.add（“带条纹的表”）；
table.classList.add（“带边框的表”）；
table.classList.add（“表悬停”）；
}
addTable（tableData）；
});
对于数量单元格，可以使用
contenteditable
属性：

tabCell.setAttribute('contenteditable', true);


$（文档）.ready（函数（）{
var表格数据=[{
“类别代码”：“C001”，
“类别名称”：“饮料”，
“数量”：“3174.0000”
},
{
“类别代码”：“C003”，
“类别名称”：“果汁”，
“数量”：“36.0000”
},
{
“类别代码”：“C004”，
“类别名称”：“汤”，
“数量”：“5.0000”
},
{
“类别代码”：“C005”，
“类别名称”：“Cookies”，
“数量”：“10.0000”
},
{
“类别代码”：“C006”，
“类别名称”：“面包”，
“数量”：“258.0000”
},
{
“类别代码”：“C007”，
“类别名称”：“面包”，
“数量”：“184.0000”
},
{
“类别代码”：“C008”，
“类别名称”：“Rusks”，
“数量”：“62.0000”
},
{
“类别代码”：“C009”，
“类别名称”：“饼干”，
“数量”：“55.0000”
},
{
“类别代码”：“C010”，
“类别名称”：“泡芙”，
“数量”：“53.0000”
},
{
“类别代码”：“C011”，
“品类名称”：“风味”，
“数量”：“343.2500”
},
{
“类别代码”：“C012”，
“类别名称”：“蛋糕”，
“数量”：“19.0000”
}
]
函数addTable（tableValue）{
var col=Object.keys（tableValue[0]）；
var countNum=col.filter（i=>！isNaN（i））.length；
var num=列拼接（0，countNum）；
col=col.concat（num）；
var table=document.createElement（“表”）；
var tr=table.insertRow（-1）；//表行。
对于（变量i=0；i


let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        // to do
    });
}

for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}

document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
    cell.addEventListener('dblclick', function() {
        if(this.childElementCount == 0) {
            let input = document.createElement('input');
            input.setAttribute('type', 'textbox');
            input.setAttribute('value', this.innerHTML);
            this.innerHTML = "";
            this.appendChild(input);
            activeCell = this;
        }
    });
}
document.addEventListener('mouseup', function(e) {
    if(activeCell != null) {
        let container = activeCell.children[0];
        if (!$(container).is(e.target) && $(container).has(e.target).length === 0) 
        {
            activeCell.innerHTML = container.value;
            activeCell = null;
        }
    }
});

 $('.text-right').attr('contenteditable', true);