例如我有这段代码:
<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 的单元格? 假设我有一个名为 fee 的变量而不是 $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
}
最佳答案
TL;DR:这是可能的。在我的答案中寻找最后一个解决方案,或查看此博客:
Conditional formatting with pure 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;
}
您甚至可以通过添加 disabled 属性使输入的行为不像输入,因此它们不可编辑。
如果您不想使用输入元素,您可以考虑使用 span 并使用“data-value”属性,并尝试浏览器是否尊重它:
<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 应该是:
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;
}
当然缺点和前面的方法一样——你必须生成两次值,一次作为文本内容,一次作为类名,并且你需要添加内部跨度。
编辑:美元字符在 css 类名中无效,所以我删除了它。
EDIT2:事实证明,有一种方法可以做到这一点,而无需将值复制为文本和属性。作为奖励,事实证明,如果我们依赖 :after 伪类,您也不需要内部跨度(因为隐藏的是该类,而不是单元格本身):
<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: "";
}
关于javascript - 有没有一种方法可以仅使用 HTML/CSS 隐藏基于特定值的数据单元格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29499952/