如何通过 JavaScript 从表格中删除第一个单元格的边框? (最终,其他如所描述的)
var firstRow = document.getElementById("tbl1").rows[0].cells;
//Get first cell
//firstRow[0].style.REMOVE CELL BORDER
//Get 2nd row of tbl1
var secRow = document.getElementById("tbl1").rows[1].cells;
//Get 5th cell
secRow[4].style.backgroundColor = 'darkBlue';
//Get 4th row of tbl1
var fouthRow = document.getElementById("tbl1").rows[3].cells;
//Get 3rd, 4th and 5th cell
fouthRow[2].style.backgroundColor = 'darkBlue';
fouthRow[3].style.backgroundColor = 'darkBlue';
fouthRow[4].style.backgroundColor = 'darkBlue';
//Get 7th row of tbl1
var seventhRow = document.getElementById("tbl1").rows[6].cells;
//Get 2nd, 3rd cell
seventhRow[1].style.backgroundColor = 'darkBlue';
seventhRow[2].style.backgroundColor = 'darkBlue';
本质上,我想从表格中删除单元格。 如果有更好的方法来获得所需的结果,我对此表示满意。谢谢!
最佳答案
针对您的问题,我提出了 2 个想法。
第一个:
如果您不关心单元格的对齐方式(但我相信您关心...)
您可以像这样定位 td
:
const myTable = document.querySelector('#myTable tbody')
const myRows = document.querySelectorAll('#myTable tr')
const childToRemove = myRows[0].children[0]
然后像这样删除它:
myRows[0].removeChild(childToRemove)
但是为了保持 UI 完整,我可能会采用以下解决方案:
const myTable = document.querySelector('#myTable tbody')
const myRows = document.querySelectorAll('#myTable tr')
const childToRemove = myRows[0].children[0]
childToRemove.style.borderColor = 'white'
childToRemove.style.color = 'white'
childToRemove.style.pointerEvents = 'none'
这是一个 JSfiddle:https://jsfiddle.net/mkbctrlll/Lumjcy7d/35/
希望对你有帮助
关于javascript - 如何删除表格单元格的边框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55789687/