页面加载时删除空表行的JavaScript

所以我有一个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代码

谁能帮我一下吗

---

以下是实际输出（文本已更改）：

类型
版本
建造
更新
补丁
操作系统IP地址
语言
苏姆钦戈斯
什么，版本
做点什么
更新一下
什么，补丁
某物.ip
语言

所以是的，我认为在输出时有一条新的线路，即使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>

类型
版本
建造
更新
补丁
操作系统IP地址
语言
$（var1）
$（var2）
$（var3）
$（var4）
$（var5）
$（var6）
$（var7）
$（var8）
$（var9）
$（var10）
$（var11）
$（var12）
$（var13）
$（var14）

当输出完成时，终端td位于一条新的线路上。 进一步澄清剧本。 本质上，它是一个在ESXi上运行的shell脚本，它获取操作系统信息（$var1、$var2等），并创建一个html文件，其中包含一个表和操作系统信息……等等。

---

当在$var1上使用的命令没有输出时，它会给出一个“空”变量。但是我猜它不是空的，它有一个新行或空格。

你可以得到所有的

td

并查看它们是否为空，如果是，隐藏

tr

父项

要检查

td

是否为空（包括是否有空格），应在检查之前使用

trim（）

删除所有空格

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

const cells=document.querySelectorAll（'table tr td'））
cells.forEach（（cell）=>{
cell.innerHTML.trim（）==''？cell.parentNode.style.display='none'：''
})

tr{
背景：红色；
}

名称
类型
父母亲
时间
有些事
有些事
有些事
有些事
有些事
有些事
有些事
有些事

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

window.addEventListener（'load'，function（）{
var tds=document.querySelectorAll（'table tr td:first child:empty'）
tds.forEach（功能（td）{
td.parentNode.setAttribute（'hidden'、'hidden'）
})
})

td{
边框：1px点黑色；
}

名称
类型
父母亲
时间
有些事
有些事
有些事
有些事
有些事
有些事
有些事
有些事

td:empty{
显示：无；
}

名称
类型
父母亲
时间
有些事
有些事
有些事
有些事
有些事
有些事
有些事
有些事

也许你应该看看这个帖子：你好。Thx用于快速响应。不幸的是它不起作用。@ZoltanSzabo它不起作用对我来说是不够的反馈。您是否收到任何错误？你把密码放在哪里了？你检查控制台了吗？因为正如你在我的例子中所看到的，它是有效的。尝试在

窗口中使用它。onload

事件是的，您的代码工作正常。我很惊讶它没有从我的html文件中删除表行。但是我设法找到了原因（我想）。这可能是因为其中有一行新词或一些空格。我编辑了我的帖子。现在它有了更多的细节和实际输出。请看一看。JavaScript有一个问题，但这个答案提供了一个CSS规则。看起来它可能会解决佐尔坦的问题。@Ryan它不会隐藏

tr

。它隐藏了空的

td

。因此，如果一个

tr

将有3个

td

而不是全部3个空，tr仍将显示。op说“我的目标是删除所有带有空单元格的表行。”由此我了解到，如果一行中有空td，则应删除该行/hidden@MihaiT-在示例中，Zoltan提供了没有包含一些空单元格和一些非空单元格的行。听起来你把问题弄得更复杂了。让我们让佐尔坦澄清一下。如果他确实只关心完全空的行，那么CSS解决方案可能是最好的。@Ryan可能是我“过度复杂化”了它，但是这个解决方案不会隐藏/删除

tr

s。它隐藏了

td

s@MihaiT-我已将答案转换为一个代码片段，以表明它在给定的示例输入上非常有效。我同意，未公开的因素可能会使此解决方案变得非最优-例如，如果表格行设置了样式，那么通过折叠内部单元格隐式隐藏行可能不再像您看到的样式化折叠行那样有效。然而，考虑到Zoltan提供的输入，该解决方案非常有效。

<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>