有没有办法只使用HTML/CSS基于特定值隐藏数据单元？

Question

例如,我有这个代码:

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

有没有办法只使用HTML/CSS隐藏等于$ 0的单元格？让我们说而不是0美元,我有一个名为费用的变量,可以是各种值:$ 0,$ 20,$ 100等.

例如:

<script>
    var fees = ["$0", "$20", "$100"];
    document.querySelector('.results').innerHTML = fees[1];
</script>

有没有办法检查它是什么值,如果发现它是0美元,我可以隐藏它吗？

我的CSS是:

table{
    border-width: 1px;
    border-style: solid;
    border-collapse: separate;
    width: 400px;
}

#test{
    empty-cells: show;
    margin-bottom: 20px;
}

tr, th, td{
    border-width:1px;
    border-style: solid;
}

.results {
    display: none;     // I want this to only display none when fees = $0
}

Answer 1

TL; DR:这是可能的.在我的答案中寻找最后的解决方案,或查看此博客:

使用纯css进行条件格式化

我假设你不想隐藏单元格,只有它的值.隐藏单元格在表格中没有意义,因为它可能会改变布局,任何单元格边框等也会被隐藏 - 可能不是你想要的.

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

并使用像这样的规则

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>

css woudl是:

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

当然,这样做的缺点是你必须添加两次值(一次作为文本内容,一次作为属性),并且你需要生成一个感觉有点难看的内部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将是:

td span.value0 {
    display: none;   
}

当然缺点与前面的方法相同 - 你必须生成两次值,一次作为文本内容,一次作为classname,你需要添加内部跨度.

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

编辑2:事实证明,有一种方法可以做到这一点,而不会将值作为文本和属性重复.作为奖励,事实证明你不需要内部跨度,如果我们依赖于:在伪类之后(因为它是隐藏的类,而不是单元本身):

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

使用这个css:

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

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