Стильные строки с четными/нечетными строками не работают: jQuery

Код HTML/jquery с сайта w3s. Если вы попробуете его: Try It W3S Увидите проблему. нечетные строки имеют разную непрозрачность, чем четные строки, это нормально, , но я хочу, чтобы цвет текста (или яркость) оставался прежним. Как это сделать? Я пробовал, установив: $("tr td").css("opacity","1.0");, но это не помогло.Стильные строки с четными/нечетными строками не работают: jQuery

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

источник

2013-06-13 maximus

http://www.w3fools.com/ – Christoph

Кажется, работает отлично: HTTP: // jsfiddle.net/j08691/uYSJ8/. Цвет текста тот же, но поскольку вы изменяете непрозрачность, он выглядит светлее. – j08691

@ j08691 Дело в том, что я не хочу, чтобы текст был светлее. Я хочу сохранить его таким же, как в четных строках. – maximus

На самом деле, текст цвета остается неизменным. Однако 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

EDIT : альтернативно this question about converting RGB to RGBA очень интересен и затрагивает тему о непрозрачности, изменяя визуальное представление цвета.

Однако для достижения этого эффекта вам не нужен javascript, simple css declaration will do.

источник

2013-06-13 15:56:46 Christoph

Спасибо! он работал :) – maximus

Вы можете сделать это довольно просто с помощью CSS3:

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

источник

2013-06-13 16:01:38 designcise

+1 для выбора легкого пути;) – Christoph

Это может помочь,

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

источник

2014-03-17 04:11:44 vardhan

Стильные строки с четными/нечетными строками не работают: jQuery

ответ

Смежные вопросы