我在CSS中使用此通配符来选择包含“,”逗号的数据。
td[data-content*=","]{
background-color: yellow;
}
是否有一种方法可以区分数据中的","
的数量。我可以用黄色突出显示包含一个逗号的数据。我想用绿色突出显示包含两个逗号的数据。有没有办法用CSS做到这一点?谢谢。
我想根据包含的逗号数据的数量同时使用不同的颜色。因此,(1,2)之类的数据将为黄色。并且(1,2,3)之类的数据将变为绿色。
答案 0 :(得分:3)
这是一个jQuery解决方案:
$('td').each(function() {
var c = $(this).text();
if (!c) return;
var commas = c.split(",").length - 1;
if (commas === 1) $(this).css("background-color", "yellow");
if (commas === 2) $(this).css("background-color", "green");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>a</td>
<td>a,b</td>
<td>a,b,c</td>
</tr>
</tbody>
</table>
应该很不言自明:
td
s data-content
属性并计算逗号答案 1 :(得分:1)
您不能在纯CSS中执行此操作。 CSS属性选择器仅允许文字匹配,而不允许通配符/ glob / regexp匹配
有关定义,请参见此处:https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
我已经制作了VanillaJS解决方案。通过这种方式,我计算了data-content
属性中的逗号匹配项,并根据匹配项的数量添加了一个具有不同值的新data-content-classification
属性。
console.clear()
// Start after loading of the document
window.addEventListener('load', function() {
// get all the table cells with data-content attribute
var tdContents = document.querySelectorAll('td[data-content]');
// loop over those cells
for (var i = 0; i < tdContents.length; i++) {
// anonymous function which gets a single table cell element as argument
;(function(el) {
// get the attribute's value
var dc = el.getAttribute('data-content')
// react according to the length of the comma matches (with fallback to prevent error)
switch ((dc.match(/,/g) || []).length) {
case 0:
// if no comma found
el.setAttribute('data-content-classification', 0);
break;
case 1:
// if one comma found
el.setAttribute('data-content-classification', 1);
break;
default:
// default, meaning more than one comma
el.setAttribute('data-content-classification', 2);
}
})(tdContents[i]);
}
})
@charset "UTF-8";
td[data-content-classification="1"] {
background-color: yellow;
}
td[data-content-classification="2"] {
background-color: red;
}
td:after,
td:before {
order: -2;
content: "data-content: " attr(data-content);
background-color: goldenrod;
min-width: 50px;
display: inline-block;
margin: 2px;
padding: 2px;
margin-right: 10px;
}
td:after {
order: -1;
content: "data-content-classifiction: " attr(data-content-classification) " ";
}
td {
padding: 3px;
display: flex;
width: 100%;
}
<table>
<tr>
<td>Lorem, ipsum dolor.</td>
</tr>
<tr>
<td data-content="1">Lorem, ipsum dolor.</td>
</tr>
<tr>
<td data-content="1,2">Lorem, ipsum dolor.</td>
</tr>
<tr>
<td data-content="2,3">Eveniet, sunt reiciendis.</td>
</tr>
<tr>
<td data-content="1,2,3">Accusantium, quam impedit.</td>
</tr>
<tr>
<td data-content="1,2,3,5">Accusantium, quam impedit.</td>
</tr>
</table>
答案 2 :(得分:1)
请注意,此答案包含jQuery表示法,因此需要使用jQuery库。
您可以做的是遍历所有data-content
的{{1}},就像您最初想要使用通配符选择器一样。
然后您可以使用,
来获取自定义属性的内容。
然后可以使用该字符串,并使用$(this).attr()
将其转换为数组。之后,您要计算数组的长度。记住要减去1,因为数组从0开始计数。
然后您检查逗号的情况,并使用.split()
函数设置CSS逻辑。
示例:
css()
function testing() {
$('[data-content*=","]').each(function() {
var myAttr=$(this).attr('data-content');
var myArr=myAttr.split(",");
var countCommas=myArr.length - 1;
var yellow=1;
var green=2;
if(countCommas == yellow) {
$(this).css("background-color", "yellow");
}
else if(countCommas == green) {
$(this).css("background-color", "green");
}
});
}
您无需通过单击按钮来触发功能,我只是出于测试目的添加了此功能,以便您可以看到效果。
如果要使其自动运行,只需将其放在<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-content="1,2">
1,2
</td>
</tr>
<tr>
<td data-content="1,2,3">
1,2,3
</td>
</tr>
<tr>
<td>
No color
</td>
</tr>
</table>
<br />
<button onclick="testing();">Test</button>
块中即可。
示例:
document.ready
$(document).ready(function() {
$('[data-content*=","]').each(function() {
var myAttr=$(this).attr('data-content');
var myArr=myAttr.split(",");
var countCommas=myArr.length - 1;
var yellow=1;
var green=2;
if(countCommas == yellow) {
$(this).css("background-color", "yellow");
}
else if(countCommas == green) {
$(this).css("background-color", "green");
}
});
});