javascript - 如何隐藏空表的边框(HTML，Javascript)

Question

我想从屏幕上完全删除 HTML 表格，并且稍后仍然可以向其中添加行。我有以下代码来删除表中的所有行(基本上，它将表的内部 HTML 设置为“”):

function removeAllRows() {
    table = document.getElementById("myTable")
    table.innerHTML = ""
}

但是，当调用此函数时，表格并未完全删除...表格上有一个小 Blob ，我相信这与表格元素的 1 像素边框有关。

我想修改此函数以从屏幕上完全删除表格，这基本上会在表格为空时隐藏表格边框。

我可以在样式 block 中放入一些东西来做到这一点吗？

现在，我的样式 block 看起来像:

table, td {
    border: 1px solid black;
    border-collapse: separate;
    empty-cells: hide;
}

empty-cells: hide; 将隐藏空单元格的边框，但如果整个表格没有单元格，则不会隐藏整个表格的边框。

有没有办法隐藏空表格的边框？

fiddle

Answer 1

要隐藏表格，您可以这样做...

function removeAllRows() {
    var table = document.getElementById("myTable")
    // Checking that the table element exists before setting it to hidden to avoid nullreference exceptions.
    if(!!table){table.hidden = true;}
}