使用 jquery 交替行颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8128581/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
alternate row colors using jquery
提问by Oscar C
Using jQuery and not CSS, is it possible to alternate row colors between records? If so can anyone provide a short code script on how to accomplish this?
使用 jQuery 而不是 CSS，是否可以在记录之间交替行颜色？如果是这样，任何人都可以提供有关如何完成此操作的简短代码脚本吗？
回答by aknatn
Try this:
尝试这个：
$("tr:even").css("background-color", "#eeeeee");
$("tr:odd").css("background-color", "#ffffff");
回答by Brian Nickel
Do you just not want to use CSS for cross-browser (i.e., IE) support? If so, you couldkeep the styling in the CSS and just use jQuery to set the class.
您只是不想将 CSS 用于跨浏览器（即 IE）支持吗？如果是这样，您可以将样式保留在 CSS 中，只需使用 jQuery 来设置类。
For example:
例如：
<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>
回答by Dennis
You can select trelements from a table and css accepts a function as a parameter, which will return a value based on some criteria you decide. In this case, you can test the index for evenness.
您可以tr从表中选择元素，css 接受一个函数作为参数，它将根据您决定的某些条件返回一个值。在这种情况下，您可以测试索引的均匀性。
$("#table tr").css("background-color", function(index) {
return index%2==0?"blue":"red";
});
JSFiddle: http://jsfiddle.net/n3Zny/
JSFiddle：http: //jsfiddle.net/n3Zny/
回答by Jasper
jQuery uses the Sizzle Seletor Engine, which is cool because it uses the same syntax as CSS. So you use the same selector as CSS but then use the jQuery .css()function to alter the elemen't CSS:
jQuery 使用 Sizzle Seletor 引擎，这很酷，因为它使用与 CSS 相同的语法。因此，您使用与 CSS 相同的选择器，然后使用 jQuery.css()函数来更改元素的 CSS：
$('#table_id').find('tr:even').css({'background-color':'red'})
.end().find('tr:odd').css({'background-color':'blue'});
This code example selects the table you want to alter, then selects all the even child elements (tr's) and changes their background color, it then uses .end()to return to the previous selection of the entire table and selects the odd rows to alter their CSS.
此代码示例选择您要更改的表格，然后选择所有偶数子元素 ( tr's) 并更改它们的背景颜色，然后用于.end()返回整个表格的先前选择并选择奇数行以更改其 CSS .
回答by Manish
I used following code to change color of alternate row. I have taken reference from http://www.tutsway.com/set-alternate-row-colors-in-jQuery.php
我使用以下代码来更改备用行的颜色。我参考了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");
});
回答by gordon
For anyone wanting to skip over hidden rows (or another attribute, say class="struck"):
对于想要跳过隐藏行（或其他属性，例如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");
}
});
}
