如何使Html表列可编辑？ [英] How to Make Html Table Column editable?
问题描述
我有一个带有一些JSON数据的HTML表格，我想制作我的列可编辑的，就像用户点击或双击该单元格应该可编辑一样
I have an HTML table with some JSON Data,I want to make one of my column editable,like on user click or double click that cell should be editable
我不知道如何实现这一目标。
在谷歌上搜索我发现< td contenteditable ='true'>< / td> 使用此我可以使单元格可编辑但动态我不知道如何使用
i don't have any idea how to achieve that.
On searching on google I found that <td contenteditable='true'></td> using this i can make the cells editable but dynamically i don't know how to use it
SNIPPET
$(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>
我想要数量列数据可编辑
请在这里的任何人如何指导我一些好的方法会非常有帮助。
I want to make Quantity Column Data Editable
Please anyone out here how can guide me with some good approaches would be very helpfull.
推荐答案
您需要将事件监听器添加到表的单元中（td），事件应该是双击事件（dblclick），还要注意，我们必须创建一个 activeCell 变量来存储，哪个单元格是激活，
You need to add event listener to your cells of table (td), the event should be double click event (dblclick), also note that, we have to create a activeCell variable to store, which cell is activated,
let activeCell = null;
let cells = document.getElementsByTagName('td');
for(let cell of cells) {
cell.addEventListener('dblclick', function() {
// to do
});
}
关于要执行代码块的事件监听器，您需要使 innerHTML细胞是一个输入或 textarea 与JavaScript，
On event listener's to do code block, you need to make innerHTML of cell's an input or textarea with JavaScript,
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;
}
});
}
当用户点击激活的表格单元格外部时，保存新值单元格的输入并使其返回正常文本，使用 mouseup 事件侦听器，
When user, clicks outside of the activated table cell, save the new value of cell's input and make it back a normal text, with mouseup event listener,
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;
}
}
});
我使用过JQuery的一些方法，这些方法是 .is ， .has 用于检查点击的对象是否未激活。
I have used, some methods with JQuery, these are .is and .has for checking the clicked object is not activated cell.
最终代码如下所示，
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;
}
}
});
祝你有个美好的一天：）
Have a good day :)
这篇关于如何使Html表列可编辑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
