javascript - 如何删除表格单元格的边框？

Question

如何通过 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';

本质上，我想从表格中删除单元格。如果有更好的方法来获得所需的结果，我对此表示满意。谢谢!

Answer 1

针对您的问题，我提出了 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/

希望对你有帮助