Question

我想从屏幕上完全删除HTML表格，但仍然可以在以后添加行。我有以下代码从表中删除所有行（基本上，它将表的内部HTML设置为“”）：

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

然而，当调用此函数时，表格没有被完全删除......桌子上有一个小斑点，我认为这与表格元素的1像素边界有关。

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

我可以在样式块中添加一些东西吗？

现在，我的样式块看起来像：

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;}
}

Answer 2

您可以通过编程方式更改边框。在removeAllRows（）

中添加此行

table.style.border="0px";

然后在addRow（）方法中，添加边框：

table.style.border="1px solid black";

Answer 3

您可以在表格中添加无边框类

function removeAllRows() {
    table = document.getElementById("myTable")
    table.innerHTML = ""
    table.className = 'no-border';
}

在你的CSS文件中：

.no-border {
    border: none;
}

Answer 4

单独使用CSS无法解决问题。但是你可以隐藏表格或只是切换classlist属性

if (table.children.length) {
    table.classList.toggle('border') // whatever should replace default
}

如何隐藏空表的边框（HTML，Javascript）

4 个答案: