Используя jQuery, а не CSS, можно ли чередовать цвета строк между записями? Если да, то кто может предоставить короткий код script о том, как это сделать?
Чередующиеся цвета строк с помощью jquery
Ответ 1
Попробуйте следующее:
$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");
Ответ 2
Вы просто не хотите использовать CSS для кросс-браузера (т.е. IE)? Если это так, вы можете сохранить стиль в CSS и просто использовать jQuery для установки класса.
Например:
<style>
/* tr:nth-child(even) */
tr.even { background-color: white; }
/* tr:nth-child(odd) */
tr.odd { background-color: black; }
</style>
<script>
$(function(){
// Apply to each table individually and make sure nothing is doubleclassed
// if you run this multiples of times.
$('table').each(function() {
$('tr:odd', this).addClass('odd').removeClass('even');
$('tr:even', this).addClass('even').removeClass('odd');
});
});
</script>
Ответ 3
Вы можете выбрать элементы tr
из таблицы, а css принимает функцию как параметр, который вернет значение, основанное на некоторых критериях, которые вы решите. В этом случае вы можете проверить индекс для равномерности.
$("#table tr").css("background-color", function(index) {
return index%2==0?"blue":"red";
});
JSFiddle: http://jsfiddle.net/n3Zny/
Ответ 4
jQuery использует Sizzle Seletor Engine, что классно, потому что он использует тот же синтаксис, что и CSS. Таким образом, вы используете тот же селектор, что и CSS, но затем используйте функцию jQuery .css()
для изменения элемента CSS:
$('#table_id').find('tr:even').css({'background-color':'red'})
.end().find('tr:odd').css({'background-color':'blue'});
Этот пример кода выбирает таблицу, которую вы хотите изменить, затем выбирает все четные дочерние элементы (tr
) и меняет их цвет фона, затем использует .end()
для возврата к предыдущему выбору всей таблицы и выбирает нечетные строки, чтобы изменить их CSS.
Ответ 5
Я использовал следующий код для изменения цвета альтернативной строки. Я взял ссылку из http://www.tutsway.com/set-alternate-row-colors-in-jQuery.php
window.jQuery(document).ready(function(){
window.jQuery("tr:odd" ).css("background-color","#fbcff5" );
window.jQuery("tr:even").css("background-color","#bbbbff");
});
Ответ 6
Для тех, кто хочет пропустить скрытые строки (или другой атрибут, скажем class="struck"
):
<style>
tr.struck{background-color:#633;color:white;}
tr.eee{background-color:#EEE;color:#000;}
tr.fff{background-color:#FFF;color:#000;}
</style>
function doZebra(){
var tTrCnt=0;
$("##tblData tbody tr").each(function(){
if($(this).css("display")!="none" && !$(this).hasClass("struck")){
tTrCnt++;
if(tTrCnt % 2) $(this).removeClass().addClass("eee");
else $(this).removeClass().addClass("fff");
}
});
}