Javascript 是否有方法仅使用HTML/CSS根据特定值隐藏数据单元格？

例如，我有以下代码：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td>$100</td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td class="results"></td>
    </tr>
</table>

---

TL；医生：有可能。在我的答案中查找最后一个解决方案，或查看此博客：

我假设您不想隐藏单元格，只想隐藏其值。隐藏单元格在表中没有意义，因为它可能会更改布局，而且任何单元格边框等也会被隐藏-可能不是您想要的

现在CSS没有任何基于元素文本内容的选择器。但它确实支持属性值选择器。因此，您可以将代码更改为：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><input value="$100"/></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td><input value="$0"/></td>
    </tr>
</table>

您甚至可以通过添加禁用属性使输入不可编辑，从而使输入的行为与输入不同

如果您不想使用输入元素，您可以考虑使用SPANS来替代，并使用“数据值”属性，并尝试浏览器是否尊重：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><span data-value="$100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span data-value="$0">$0</span></td>
    </tr>
</table>

当然，这样做的缺点是必须添加两次值（一次作为文本内容，一次作为属性），并且需要生成一个感觉有点难看的内部span元素

或者，您可以尝试添加包含该值的类属性并创建类选择器：

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td ><span class="value100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span class="value0">$0</span></td>
    </tr>
</table>

当然，缺点与前面的方法相同-必须生成两次值，一次作为文本内容，一次作为类名，并且需要添加内部跨度

编辑：美元字符在css类名中无效，所以我删除了它

EDIT2：事实证明有一种方法可以做到这一点，而无需将值作为文本和属性进行复制。另外，如果我们依赖于：after伪类（因为隐藏的是该类，而不是单元格本身），那么也不需要内部跨度：

---

为了计算这样的东西，您需要javascript。CSS和HTML是标记语言，不能计算这样的内容。HTML或CSS无法读取值。你需要一种脚本语言来实现这一点。不需要。但是，如果您正在动态填充

td

内容，那么您可能还可以将

数据属性

应用于

td

，并使用CSS将其作为目标。我可以确认所有这些方法在Chrome和Firefox中都有效。我不想尝试IE。让我们知道是谁做的。非常有创意的实现基于这些想法的条件格式的更多想法

input[value="$0"] {
    display: none;
}

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td><span data-value="$100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span data-value="$0">$0</span></td>
    </tr>
</table>

td > span[data-value="$0"] {
    display: none;
}

<table>
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td ><span class="value100">$100</span></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td ><span class="value0">$0</span></td>
    </tr>
</table>

td span.value0 {
    display: none;   
}

<table border="1">
    <caption>Test</caption>
    <tr>
        <th>Values</th>
        <td data-value="$100"></td>
    </tr>
    <tr>
        <th>Initial value</th>
        <td data-value="$0"></td>
    </tr>
</table>

  td:after {
      content: attr(data-value);
  }

  td[data-value="$0"]:after {
      content: "";
  }