Question

这是来自w3s网站的HTML / jquery代码。如果你在以下地址试用：Try It W3S 你会看到问题。奇数行的不透明度与偶数行不同，这没关系，但我希望文字颜色（或亮度）保持不变。怎么做？我通过设置$("tr td").css("opacity","1.0");来尝试它，但它没有帮助。

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){

 $("tr").css("background-color", "yellow").css("opacity","1.0");

 $("tr:odd").css("opacity","0.5");
 $("tr td").css("opacity","1.0");
});
</script>
</head>
<body>

<h1>Welcome to My Web Page</h1>

<table border="1">
<tr>
  <th>Company</th>
  <th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkцp</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
</table>

</body>
</html>

Answer 1

实际上，文字颜色保持不变。但是，opacity始终会影响整个元素（背景，边框，文本颜色）和所有它的后代。如果您只想使用透明背景，则必须使用hsla或rgba颜色作为背景，这会引入“透明度”通道，该通道仅影响该单个元素的背景：

// all you need is:
$(document).ready(function(){
    $("tr:even").css("background-color","rgb(255,255,0)");
    // rgba equivalent for yellow with 50% opacity
    $("tr:odd").css("background-color","rgba(255,255,0,0.5)");
});

Your modified Example

编辑：或者this question about converting RGB to RGBA非常有趣，并触及关于不透明度改变颜色的视觉表示的主题。

但是你根本不需要javascript来实现这种效果，simple css declaration will do。

Answer 2

您可以使用CSS3完成此操作：

tr:nth-child(odd) {background-color: rgba(255, 255, 0, 0.5);}

Answer 3

这可能有所帮助，

    <script>
    $( "tr:even" ).css( "background-color", "#A9D6F5" );
    $( "tr:odd" ).css( "background-color", "#ACE6CB" )
    </script>

使用jQuery的偶数/奇数表行样式

3 个答案: