通过我的测试我发现两个两种方法来编辑单元格的内容
第一种点击编辑:
我是给td里添加一个input,将值赋值给input,当失去焦点的时候将input的值付给td原来的内容,然后将input删除,
代码如下:
let oldel = cell.children[0]
if (column.label != "日期") { if(cell.children.length>1){return} ////防止点击cell再次创建input输入框 var cellInput = document.createElement("input"); cellInput.setAttribute("type", "text"); cellInput.setAttribute("class", "edit"); cellInput.value =cell.children[0].innerText;
cellInput.style.width = "100%";
cellInput.style.border = "none";
cellInput.style.backgroundColor = "transparent";
cellInput.style.paddingLeft = "10px";
cellInput.style.outline = "none";
oldel.style.display = " none";
cell.appendChild(cellInput);
cellInput.focus(); //主动聚焦
cellInput.onblur = function() {
oldel.innerHTML = cellInput.value;
oldel.style.display = "block";
cell.removeChild(cellInput);
//event.target.innerHTML = cellInput.value;
};
}
第二种方法:
通过contentEditable来控制元素可以输入编辑
代码如下:
celledit(row, column, cell, event) {
cell.contentEditable = true;
cell.focus()
}
不需要太多,只要两行就行;
上面实现了点击编辑单个单元格的功能,现在还要实现通过键盘按上下左右在不同单元格进行切换;这样更利于用户体验
因为我使用的是Element+vue,如果你也使用的这个复制粘贴可以拿过去直接用;所以如果其他使用这个可能要进行一些改变;
let self = this; if (boolen == true) { document.onkeydown = function(e) { console.log(e); var curel = document.activeElement; //当前元素 var curcellIndex = curel.cellIndex; // 当前元素行单元格索引 var curRowIndex = curel.parentElement.sectionRowIndex; //当前元素行的索引; var curtbody = curel.parentElement.parentElement.children; //当前tbody内容的整个表单 curel.onblur = function() { console.log(curel.innerText); self.check(curel.innerText); }; if (e.keyCode == 38) { //按上键 if (curRowIndex - 1 < 0) { curel.contentEditable = false; curtbody[curtbody.length - 1].children[ curcellIndex ].contentEditable = true; curtbody[curtbody.length - 1].children[curcellIndex].focus(); } else { curel.contentEditable = false; curtbody[curRowIndex - 1].children[ curcellIndex ].contentEditable = true; curtbody[curRowIndex - 1].children[curcellIndex].focus(); } } else if (e.keyCode == 37) { let preCellindex = curtbody[curtbody.length - 1].children.length - 1; console.log("preRow", curel.parentElement.children.length); //键盘按钮左键 if (curcellIndex - 1 == 0) { if (curRowIndex - 1 < 0) { curel.contentEditable = false; curtbody[curtbody.length - 1].children[ preCellindex ].contentEditable = true; curtbody[curtbody.length - 1].children[preCellindex].focus(); } else { curel.contentEditable = false; curtbody[curRowIndex - 1].children[ preCellindex ].contentEditable = true; curtbody[curRowIndex - 1].children[preCellindex].focus(); } } else { curel.contentEditable = false; curel.parentElement.children[ curcellIndex - 1 ].contentEditable = true; curel.parentElement.children[curcellIndex - 1].focus(); } } else if (e.keyCode == 39 || e.keyCode == 9) { //键盘按钮右键 e.preventDefault(); if (curcellIndex + 1 == curel.parentElement.children.length) { if (curRowIndex + 1 == curtbody.length) { curel.contentEditable = false; curtbody[0].children[1].contentEditable = true; curtbody[0].children[1].focus(); } else { curel.contentEditable = false; curtbody[curRowIndex + 1].children[1].contentEditable = true; curtbody[curRowIndex + 1].children[1].focus(); } } else { curel.contentEditable = false; curel.parentElement.children[ curcellIndex + 1 ].contentEditable = true; curel.parentElement.children[curcellIndex + 1].focus(); } } else if (e.keyCode == 40 || e.keyCode == 13) { //向下按钮按键 e.preventDefault(); if (curRowIndex + 1 == curtbody.length) { curel.contentEditable = false; curtbody[0].children[curcellIndex].contentEditable = true; curtbody[0].children[curcellIndex].focus(); } else { curel.contentEditable = false; curtbody[curRowIndex + 1].children[ curcellIndex ].contentEditable = true; curtbody[curRowIndex + 1].children[curcellIndex].focus(); } } }; }