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>

Answer 2

在另一个线程中回答。 Jquery: hiding empty table rows

遍历所有表tr行，并检查td长度。如果td长度为空将隐藏。

$("table tr").each(function() {        
        let cell = $.trim($(this).find('td').text());
        if (cell.length == 0){
            console.log('Empty cell');
            $(this).addClass('nodisplay');
        }                   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <!-- Will hide --> <td></td>
  </tr>
</table>

Answer 3

在这里，一个简单的row方法为空（这使我们稍后可以轻松检查其他条件）。

将行遍历，如果为空，则调用remove。

const rowIsEmpty = (tr) => Array.from(tr.querySelectorAll('td')).every(td => td.innerText === "");

deleteEmptyRows();

function deleteEmptyRows() {
  var myTable = document.getElementById("myTable");
  
  myTable.querySelectorAll('tr').forEach(tr => {
    if(rowIsEmpty(tr)) tr.remove();
  });

 
}

<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>
    <tr>
      <td></td>
      <td></td>
      </tr>
  </tbody>
</table>

Answer 4

使用本地Javascript：

function removeRow(src) {
    var tableRows = document.getElementById(src).querySelectorAll('tr');
    tableRows.forEach(function(row){
        if((/^\s*$/).test(row.innerText)){
            row.parentNode.removeChild(row);
        }
    });
}

removeRow('myTable');

唯一的问题是，当行中除了空格以外还有其他一些字符时。此正则表达式检查是否有空白字符，但是如果u内部有dot或任何其他非空字符，它将失败。

隐藏空的html表行

4 个答案: