整行为空时自动隐藏HTML表中的行

在HTML表格中，如果整行中的所有单元格（列）都为空，如何自动隐藏整行

---

我想我可以在标签中添加一些东西来实现这一点，但我似乎在任何地方都找不到解决方案。

您可以使用这样的javascript

$('tr').each(function() {
  if($(this).find('td').length == 0) {
   $(this).hide();
  }
});

---

在HTML中，您可以使用

hidden

属性，就像在

中一样，但这是HTML5的新特性，并且浏览器支持有限。但是，如果可以直接更改HTML标记，隐藏元素的最佳方法是删除它

假设出于某种原因，您需要一些仍然可以让标记中有行的内容，那么您可以使用JavaScript，例如，如下所示：

<script>
function emptyCellsOnly(row) {
  var cells =  row.cells;
  for(var j = 0; j < cells.length; j++) {
    if(cells[j].innerHTML !== '') {
      return false;
    }
  }
  return true;
}
var rows = document.getElementsByTagName('tr');
for(var i = 0; i < rows.length; i++) {
  if(emptyCellsOnly(rows[i])) {
    rows[i].style.display = 'none';
  }
}
</script>

函数仅为空（行）{
变量单元格=行单元格；
对于（var j=0；j

测试

if（cells[j].innerHTML！=''）

检查单元格是否完全为空，如

中所示。空格字符或换行符不计算为空。如果应该，根据需要修改条件

---

代码

rows[i].style.display='none'

通过将其

display

属性设置为

none

来隐藏行，因此启用CSS的浏览器将显示页面，就好像元素不在那里一样，但脚本仍然可以访问它，等等。您可以选择从DOM中完全删除元素。

经过一些研究，我发现了这种解决方案，它比

空单元格具有优势：隐藏

，它完全删除了空单元格将占用的空间

<style type="text/css">
    table {
        border-spacing: 0px; // removes spaces between empty cells
        border: 1px solid black;
    }
    tr, td {
        border-style: none; // see note below
        padding: 0px; // removes spaces between empty cells
        line-height: 2em; // give the text some space inside its cell
        height: 0px; // set the size of empty cells to 0
    }
</style>

但在我的2列表中，它删除了左列或右列的边框，但从不同时删除这两列的边框

---

任何关于如何删除空行边框的提示都将不胜感激。

您需要Javascript/jquery或CSS吗？还是只有HTML？欢迎来到SO，正确地标记您的问题，这样您就可以找到符合您需要的解决方案。这隐藏了不包含单元格的行（而且这些行也不是很明显）。+1，尽管我想知道我们需要多长时间才能停止说“HTML5的浏览器支持有限”，而开始说“过时的浏览器不支持HTML5”？

td:empty {
    display: none;
    border-style: none;
}