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