Question

所以我有这个HTML表，其中有空单元格和空行。我的目标是删除所有带有空单元格的表行。 html代码示例：

<table id="7">
<tr>
<td>Name</td>
<td>Type</td>
<td>Parent</td>
<td>Time</td>
</tr>
<tr>
<td>something1</td>
<td>something1</td>
<td>something1</td>
<td>something1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>something3</td>
<td>something3</td>
<td>something3</td>
<td>something3</td>
</tr>

不幸的是，该表是计算机生成的，我不确定它是否为空，或者它是否具有一些空格，如制表符或换行符。当我打开html文件时，我看到的只是一个空单元格或一个空单元格在浏览器中。

我找到了一些javascript代码，但是由于我是javascript的新手，所以我无法对其进行修改以使其适合我的html代码。what i found so far

有人可以帮我吗？

这是实际输出（带有更改的文本）：

<table id="2">
<tr class="head_tbl">
<td class="head_inf">Type</td>
<td class="head_inf">Version</td>
<td class="head_inf">Build</td>
<td class="head_inf">Update</td>
<td class="head_inf">Patch</td>
<td class="head_inf">OS IP Address</td>
<td class="head_inf">Language</td>              
</tr>               
<tr class="body_tbl">
<td>SoemthingOS
</td>
<td>Something.version
</td>
<td>Something.build
</td>
<td>something.update
</td>
<td>something.patch
</td>
<td>something.ip
</td>
<td>something.language
</td>
</tr>
<tr class="body_tbl">
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>

所以是的..我认为即使在td中没有实际输出时，在进行输出时也会有新行。我说这是因为，当制作脚本以在表中获取OS输出时，就像这样：

<table id="2">
<tr class="head_tbl">
<td class="head_inf">Type</td>
<td class="head_inf">Version</td>
<td class="head_inf">Build</td>
<td class="head_inf">Update</td>
<td class="head_inf">Patch</td>
<td class="head_inf">OS IP Address</td>
<td class="head_inf">Language</td>              
</tr>               
<tr class="body_tbl">
<td>$(var1)</td>
<td>$(var2)</td>
<td>$(var3)</td>
<td>$(var4)</td>
<td>$(var5)</td>
<td>$(var6)</td>
<td>$(var7)</td>
</tr>
<tr class="body_tbl">
<td>$(var8)</td>
<td>$(var9)</td>
<td>$(var10)</td>
<td>$(var11)</td>
<td>$(var12)</td>
<td>$(var13)</td>
<td>$(var14)</td>
</tr>

当进行输出时，end-td在新行上。为了进一步阐明脚本。本质上，这是一个在ESXi上运行的shell脚本，它接收OS信息（$ var1，$ var2等），并创建一个包含表和os信息的html文件……等等。如果说$ var1上的命令没有输出，它将给出一个“空”变量。但是我的猜测是它不是空的，它有一个新行或空白。

Answer 1

您可以获取所有td并查看它们是否为空，如果是，则隐藏tr的父级。

要检查td是否为空（包括空格），应在检查之前使用trim()删除所有空格。

检查下面的代码，让我知道这是否适合您

const cells = document.querySelectorAll('table tr td')
cells.forEach((cell) => {
  cell.innerHTML.trim() === '' ? cell.parentNode.style.display = 'none' : ''
})

tr {
background:red;
}

<table>

  <tr>
    <td>Name</td>
    <td>Type</td>
    <td>Parent</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
  </tr>
 <tr class="body_tbl">
<td>

</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
  <tr>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
  </tr>

</table>

Answer 2

如果tds确实为空，则它是一个简单的选择器并循环

window.addEventListener('load', function() {
  var tds = document.querySelectorAll('table tr td:first-child:empty')
  tds.forEach(function (td) {
    td.parentNode.setAttribute('hidden', 'hidden')
  })
})

td {
  border: 1px dotted black;
}

<table id="7">
  <tr>
    <td>Name</td>
    <td>Type</td>
    <td>Parent</td>
    <td>Time</td>
  </tr>
  <tr>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
    <td>something1</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
    <td>something3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Answer 3

    td:empty {
        display: none;
    }

<table id="7">
<tr>
<td>Name</td>
<td>Type</td>
<td>Parent</td>
<td>Time</td>
</tr>
<tr>
<td>something1</td>
<td>something1</td>
<td>something1</td>
<td>something1</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>something3</td>
<td>something3</td>
<td>something3</td>
<td>something3</td>
</tr>

页面上的JavaScript删除空表行

3 个答案: