使用 Javascript 从 HTML 表中删除空行

Question

我有一个从数据库中提取的 HTML 表。一些行与文本 null 一起出现，我想遍历此表并删除或隐藏其中包含文本 null 的任何行。

第一列将是循环遍历并找到“空”文本并删除该行的列，但我不知道该怎么做。

<table class="table table-striped" id="ex-table">
  <thead class="thead-inverse">
    <col width="120">
    <col width="120">
    <col width="120">
    <tr>
      <th bgcolor="#feaf3f">Item</th>
      <th bgcolor="#feaf3f">Price</th>
      <th bgcolor="#feaf3f">Sale Price</th>
    </tr>
  </thead>
  <tbody>
    <tr id="tr">
      <td id="Item"></td>
      <td id="Price"></td>
      <td id="salePrice"></td>
    </tr>
  </tbody>
</table>

Answer 1

尝试以下方法：

var rowTag = document.getElementsByTagName("TD")
if(rowTag.textContent == "null"){
  rowTag.parentNode.removeChild()
}

Answer 2

首先你以错误的方式使用<col>标签，你需要使用<colgroup>作为它们的父标签并将它们放在<thead>标签之外。要删除空行，您应该使用 jQuery，然后您需要遍历行，如果第一列为空，则使用 td:first-child 选择器将其删除。看看sn-p。

$("#ex-table tbody tr").each(function() {
  var html = $(this).find("td:first-child").html();
  if (html === 'null') {
    $(this).remove()
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="ex-table">
  <colgroup>
    <col width="120">
    <col width="120">
    <col width="120">
  </colgroup>

  <thead class="thead-inverse">
    <tr>
      <th bgcolor="#feaf3f">Item</th>
      <th bgcolor="#feaf3f">Price</th>
      <th bgcolor="#feaf3f">Sale Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td id="Item">null</td>
      <td id="Price">50</td>
      <td id="salePrice">60</td>
    </tr>
    <tr id="tr">
      <td id="Item">2</td>
      <td id="Price">60</td>
      <td id="salePrice">70</td>
    </tr>
  </tbody>
</table>