1

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

我想我可以在标签中添加一些可以做到这一点的东西，但我似乎无法在任何地方找到解决方案。

4

4 回答 4

1

在 HTML 中，您可以使用hidden属性，如<tr 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>

测试if(cells[j].innerHTML !== '')检查单元格是否完全为空，如<td></td>. 空格字符或换行符不计为空。如果应该是，请根据需要修改条件。

代码通过将其属性设置为 来rows[i].style.display = 'none'隐藏该行，因此启用 CSS 的浏览器将显示页面，就好像该元素不存在一样，但脚本仍然可以访问它，等等。您可以选择从 DOM 中完全删除该元素。displaynone

于 2013-10-30T11:22:45.910 回答
0

你可以使用这样的javascript

$('tr').each(function() {
  if($(this).find('td').length == 0) {
   $(this).hide();
  }
});
于 2013-10-30T10:53:39.637 回答
0

经过一些研究，我发现了这种解决方案，它的优势empty-cells:hide在于它完全消除了空单元格占用的空间。

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

不幸的是你必须设置border-style: none;，否则空单元格的边界无论如何都会被绘制（这会导致粗线）。

我尝试了其他代码，例如：

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

但是在我的两列表格中，它删除了左列或右列的边界，但从不删除两者的边界......

任何有关如何删除空行边界的提示将不胜感激。

于 2014-11-04T09:15:31.937 回答
0

在我的情况下，单元格有 Spaces tabs 。它们不是数据。

areAllCellsEmpty: true 如果所有 cells.textContent 为空或空白

innerHTML 没有给出我想要的结果。

用法：

hideEmptyRows_ofTableById("myTable_id");  /* <- your table id here */

代码：

function isEmptyOrSpaces(str){
    return str === null || str.trim() === '' ;
}

function areAllCellsEmpty(row) {
  var cells =  row.cells;
  var anyCellFull = false;
  for(var j = 0; j < cells.length; j++) {
    if( ! isEmptyOrSpaces(cells[j].textContent) ) {
      anyCellFull =true;
      break;
    }
  }
  return !anyCellFull;
}

function hideEmptyRows_ofTableById(elem_id){
  var table = document.getElementById(elem_id);  
  var rows = table.getElementsByTagName('tr');

  for(var i = 0; i < rows.length; i++) {
    if( areAllCellsEmpty(rows[i]) ) {
      rows[i].style.display = 'none';
    }
  }
}
于 2021-06-24T13:33:13.507 回答