javascript - 隐藏空的 html 表格行

Question

问题

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

例如

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>

Answer 1

这就是使用 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>