在 HTML 表格中,如果该行中的所有单元格(列)为空,我如何自动隐藏整行?
我想我可以在标签中添加一些可以做到这一点的东西,但我似乎无法在任何地方找到解决方案。
在 HTML 表格中,如果该行中的所有单元格(列)为空,我如何自动隐藏整行?
我想我可以在标签中添加一些可以做到这一点的东西,但我似乎无法在任何地方找到解决方案。
在 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 中完全删除该元素。display
none
你可以使用这样的javascript
$('tr').each(function() {
if($(this).find('td').length == 0) {
$(this).hide();
}
});
经过一些研究,我发现了这种解决方案,它的优势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;
}
但是在我的两列表格中,它删除了左列或右列的边界,但从不删除两者的边界......
任何有关如何删除空行边界的提示将不胜感激。
在我的情况下,单元格有 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';
}
}
}