Question

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

我认为我可以添加一些可以执行此操作的标记，但我似乎无法在任何地方找到解决方案。

Answer 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'通过将其display属性设置为none来隐藏该行，因此支持CSS的浏览器将显示该页面，就好像该元素不在那里，但它仍然是脚本等可以访问。您可以从DOM中完全删除该元素。

Answer 2

你可以使用像这样的javascript

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

Answer 3

经过一些研究后，我发现这种溶剂比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;
}

但是在我的2列表格中，它删除了左列或右列的边框，但从未删除过两列...

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

Answer 4

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

areAllCellsEmpty : true 如果所有 cell.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';
    }
  }
}

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

4 个答案: