时间戳

首页 > 解决方案 > 隐藏空的 html 表格行

javascript - 隐藏空的 html 表格行

问题描述

问题

我有一个包含一个或多个空行的表。如何隐藏表格中的空行？

例如

1 - 约翰 | 阿尔弗雷多

2 - 标记 | 扎克

3 - |

4 - 卡尔 | 约翰逊

在这种情况下，我想删除第三行。

步骤尝试

我找到了如何删除特定行，那么删除所有空行呢？

deleteEmptyRows();

function deleteEmptyRows() {
  var myTable = document.getElementById("myTable")
  var rowToDelete = 2;
  myTable.deleteRow(rowToDelete)
 
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
  <tbody>
    <tr>
      <td>John</td>
      <td>Alfredo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Zuck</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Carl</td>
      <td>Johnson</td>
    </tr>
  </tbody>
</table>

标签： javascripthtml

解决方案

这就是您可以使用 javascript 动态隐藏空表行的方法。

deleteEmptyRows();
function checkIfCellsAreEmpty(row) {
  var cells =  row.cells;
  var isCellEmpty = false;
  for(var j = 0; j < cells.length; j++) {
    if(cells[j].innerHTML !== '') {
      return isCellEmpty;
    }
  }
  return !isCellEmpty;
}
function deleteEmptyRows() {
  var myTable = document.getElementById("myTable");
  for(var i = 0; i < myTable.rows.length; i++) {
    var isRowEmpty = checkIfCellsAreEmpty(myTable.rows[i]);
    if (isRowEmpty) {
     myTable.rows[i].style.display = "none";
    }
  }
}
<table border="1" cellspacing="1" cellpadding="1" id ="myTable">
  <tbody>
    <tr>
      <td>John</td>
      <td>Alfredo</td>
    </tr>
    <tr>
      <td>Mark</td>
      <td>Zuck</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Carl</td>
      <td>Johnson</td>
    </tr>
  </tbody>
</table>

推荐阅读