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

【问题标题】：How to hide borders of empty table (HTML, Javascript)如何隐藏空表的边框（HTML，Javascript）
【发布时间】：2016-07-22 16:18:38
【问题描述】：

我想从屏幕上完全删除一个 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

【问题讨论】：

要从页面中彻底删除表格吗？
您可以使用jquery 并在removeAllRows 函数中将一个类添加到具有border: 0px solid black; 样式的表中。但是，这可能仅适用于 Ajax，除非您在添加类后刷新页面

标签： javascript html html-table

【解决方案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;}
}

【讨论】：

我还在 HTML (DOM) 中看到了包含“将包含数据的表格”和“表格为空或不存在时使用的占位符”的页面同时。两者中的一个或另一个是隐藏的。通常它是某种“占位符”，这样用户在屏幕上某个位置“神奇地出现”时不会感到惊讶。

【解决方案2】：

您可以通过编程方式更改边框。在 removeAllRows() 中添加这一行

table.style.border="0px";

然后在addRow()方法中，把边框加回来：

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

【讨论】：

【解决方案3】：

你可以给你的表添加一个无边框类

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

在你的 CSS 文件中：

.no-border {
    border: none;
}

【讨论】：

【解决方案4】：

单独使用 CSS 无法解决。但是您可以隐藏表格或仅切换类列表属性

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

【讨论】：