使用jquery交替行颜色

使用jQuery而不是CSS，是否可以在记录之间交替行颜色？ 如果是这样，任何人都可以提供一个关于如何实现这一目标的简短代

Answer 1

试试这个：

$("tr:even").css("background-color", "#eeeeee"); $("tr:odd").css("background-color", "#ffffff"); 

Answer 2

您是否只是不想使用CSS进行跨浏览器（即IE）支持？ 如果是这样，您可以将样式保留在CSS中，只需使用jQuery来设置类。

例如：

Answer 3

jQuery使用Sizzle Seletor Engine，这很酷，因为它使用与CSS相同的语法。 所以你使用与CSS相同的选择器，然后使用jQuery .css()函数来改变元素：

 $('#table_id').find('tr:even').css({'background-color':'red'}) .end().find('tr:odd').css({'background-color':'blue'}); 

此代码示例选择要更改的表，然后选择所有偶数子元素（ tr ）并更改其背景颜色，然后使用.end()返回到整个表的先前选择并选择奇数行来改变他们的CSS。

Answer 4

您可以从表中选择tr元素，css接受一个函数作为参数，它将根据您决定的某些条件返回一个值。 在这种情况下，您可以测试索引的均匀度。

 $("#table tr").css("background-color", function(index) { return index%2==0?"blue":"red"; }); 

JSFiddle： http ： //jsfiddle.net/n3Zny/

Answer 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"); }); 

Answer 6

对于任何想跳过隐藏行（或其他属性，比如class="struck" ）的人：

  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"); } }); }