Css 单元格为空时隐藏表行

我遇到了一个似乎找不到答案的问题，但我无法想象这是不可能的

我有一个有两列的表：左边的列包含一个标签，右边包含一个值。但是，该值可以为空。标签是固定文本

我想要的是，如果行的右单元格（值）为空，则隐藏整行

例如：

<table>
 <tr>
  <td class="label">number of users:</td>
   <td class="value">8</td>
 </tr>
 <tr>
  <td class="label">total number of people:</td>
  <td class="value"></td>
 </tr>
</table>

用户数：
8.
总人数：

因为最后一行不包含值，所以我希望隐藏整行

我可以用td:empty隐藏手机，但这还不够。我试图通过将行的高度设置为0px来解决这个问题，并在显示“value”单元格时使其展开，但我也无法实现这一点，因为标签单元格已经展开了行

---

有人知道我如何只用HTML/CSS解决这个问题吗？

CSS中没有父选择器，所以你不能用CSS来解决这个问题

您可以使用jQuery：

$('td').each(function(){
  if($(this).is(:empty)){
     $(this).closest('tr').hide();
  }
});

或者以较短的形式

$('tr:has("td:empty")').hide();

---

请参阅文档：，和

虽然解决此问题需要JavaScript，但jQuery决不是一项要求。使用DOM，可以通过以下方式实现这一点：

function hideParentsOf(cssSelector) {
    var elems = document.querySelectorAll(cssSelector);
    if (elems.length) {
        Array.prototype.forEach.call(elems, function (el) {
            el.parentNode.style.display = 'none';
        });
    }
}

hideParentsOf('td:empty');

函数hideParentsOf（cssSelector）{
//CSS选择器：字符串，
//表示CSS选择器的字符串，
//例如本例中的“td:empty”。
//检索与提供的选择器匹配的元素的节点列表：
var elems=document.querySelectorAll（cssSelector）；
//如果发现任何元素：
if（元素长度）{
//使用array.forEach（）像NodeList一样迭代数组：
Array.prototype.forEach.call（elems，function（el）{
//el是当前数组元素（或中的节点列表元素）
//（本例）。
//在这里，我们找到parentNode，并将其“display”设置为“none”：
el.parentNode.style.display='none'；
});
}
}
hideParentsOf（'td:empty'）

用户数：
8.
总人数：
恐怕您需要使用
javascript
进行此操作。最好的解决方案是JQuery。您可能需要使用javascript（JQuery）来查找td中是否有值，如果没有，则查找最近的父项并将其隐藏。您正在导入jQuery吗？谢谢大家的建议。该网页加载到不支持jQuery或Javascript的外部应用程序中。Javascript代码在IE中工作，但我一把它导入应用程序，它就不再工作了。我还尝试过执行一些简单的Javascript函数，但这些函数也不起作用，所以我很确定这个应用程序不会“执行”Javascript。我想在软件供应商更改应用程序之前，我们必须接受空值。我已经从问题中删除了jQuery标记，因为虽然JavaScript是提供答案所必需的，但可以假定指定您选择的库，而无需获得，操作。在我的情况下，我没有访问jQuery的权限，所以我不能使用此代码。无论如何谢谢。谢谢，这在IE中有效，但不幸的是在使用此网页的外部应用程序中无效。不幸的是，在不了解更多有关“外部应用程序”的信息的情况下，我不确定是否可以提供进一步的帮助。虽然这可能是我使用过的（相对现代的）JavaScript方法。不过，这个应用程序可能应该在问题本身中提到。