有没有一种方法可以使用HTML / CSS来隐藏基于特定值的数据单元格？ [英] Is there a way to hide a data cell based on a specific value using just HTML/CSS?
问题描述
< table>
< caption> Test< / caption>
< tr>
< th>值< / th>
< td> $ 100< / td>
< / tr>
< tr>
th初始值< / 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是：
表{
border-width：1px;
border-style：solid;
border-collapse：分开;
width：400px;
}
#test {
empty-cells：show;
margin-bottom：20px;
}
tr，th，td {
border-width：1px;
border-style：solid;
}
.results {
display：none; //我希望这个只在费用= $ 0
}
TL; DR：这是可能的。在我的答案中寻找最后的解决方案，或者查看这个博客：
我假设你不想隐藏单元格，但只有它的价值。隐藏一个单元格在表格中没有意义，因为它可能会改变布局，任何单元格边界等也将被隐藏 - 可能不是您想要的。
现在CSS没有基于元素文本内容的选择器。但它确实支持属性值选择器。因此，您可以将您的代码更改为：
< table>
< caption> Test< / caption>
< tr>
< th>值< / th>
< td><输入值=$ 100/>< / td>
< / tr>
< tr>
th初始值< / th>
< td><输入值=$ 0/>< / td>
< / tr>
< / table>
并且使用像</ p>
input [value =$ 0] {
display：none;
}
您甚至可以通过添加禁用的属性来使输入不像输入那样行为它们是不可编辑的。
如果您不想使用输入元素，则可以考虑使用跨度并使用数据值属性，然后尝试如果浏览器尊重这一点：
< table>
< caption> Test< / caption>
< tr>
< th>值< / th>
< td>< span data-value =$ 100> $ 100< / span>< / td>
< / tr>
< tr>
th初始值< / 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>值< / th>
< td>< span class =value100> $ 100< / span>< / td>
< / tr>
< tr>
th初始值< / th>
< td>< span class =value0> $ 0< / span>< / td>
< / tr>
< / table>
和css将会是：
td span.value0 {
display：none;
}
当然缺点与前面的方法相同 - 您必须生成值两次，一次为文本内容，一次为类名，并且需要添加内部跨度。
编辑：美元字符在css classnames中无效，所以我删除了它。编辑2：事实证明有一种方法可以在不重复文本和属性值的情况下执行此操作。作为奖励，事实证明，如果我们依赖：在伪类之后（因为它是隐藏的类，而不是单元本身），你不需要内部跨度：
< table border =1>
< caption> Test< / caption>
< tr>
< th>值< / th>
< td data-value =$ 100>< / td>
< / tr>
< tr>
th初始值< / th>
< td data-value =$ 0>< / td>
< / tr>
< / table>
使用此css：
td：after {
content：attr（data-value）;
}
td [data-value =$ 0]：after {
content：;
}
For example I have this code:
<table>
<caption>Test</caption>
<tr>
<th>Values</th>
<td>$100</td>
</tr>
<tr>
<th>Initial value</th>
<td class="results"></td>
</tr>
</table>
Is there a way to hide the cells that are equal to $0 using HTML/CSS only? Let's say instead of $0 I have a variable called fee that can be a variety of values: $0, $20, $100, etc.
For example:
<script>
var fees = ["$0", "$20", "$100"];
document.querySelector('.results').innerHTML = fees[1];
</script>
Is there a way to check what value it is and if it is found to be $0 can I then hide it?
My CSS is:
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: It's possible. Look for the last solution in my answer, or check this blog:
Conditional formatting with pure css
I am assuming you do not want to hide the cell, but only its value. Hiding a cell does not make sense in a table since it would potentially change the layout, also any cell borders etc would also be hidden - probably not what you want.
Now CSS does not have any selectors based on element text content. But it does support attribute value selectors. So, you could change your code to be:
<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>
And use a rule like
input[value="$0"] {
display: none;
}
You could even make the inputs not behave like inputs by adding a disabled attribute so they aren't editable.
If you don't want to use input elements, you could consider using spans instead and use a "data-value" attribute, and try if browsers respect that:
<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>
The css woudl be:
td > span[data-value="$0"] {
display: none;
}
Of course the drawback of this is that you would have to add the value twice (once as text content, once as attribute), and you need to generate an inner span element which feels a bit ugly.
Alternatively you could try to add a class attribute that includes the value and create a class selector:
<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>
and the css would be:
td span.value0 {
display: none;
}
Of course the drawbacks are the same as with the previous method - you have to generate the value twice, once as text content and once as classname, and you need to add the inner span.
EDIT: dollar char is not valid in css classnames, so I removed it.
EDIT2: It turns out there is a way to do it without duplicating the value as both text and attribute. As a bonus, it turns out you don't need the inner span either if we rely on the :after pseudoclass (since it is that class that gets hidden, not the cell itself):
<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>
Using this css:
td:after {
content: attr(data-value);
}
td[data-value="$0"]:after {
content: "";
}
这篇关于有没有一种方法可以使用HTML / CSS来隐藏基于特定值的数据单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
