Question

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

Answer 1

试试这个：

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

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

Answer 3

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

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

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

Answer 4

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

对于任何想要跳过隐藏行（或其他属性，例如$document.ready(function() { alert("Help!"); var exceptions = ["lorem", "ipsum", "consectetur", "pharetra"]; $("p").each(function() { //for all paragraphs var txt = $(this).text() //get text, split it up, add spans where necessary, put it back together .split(" "); .map(function(x) { return exceptions.includes(x.toLowerCase()) ? x : "<span class='hover'>" + x + "</span>"}); .join(" "); $(this).html(txt); //set the text to our newly manipulated text }).on("mouseover", ".hover", function() { $(this).addClass("hovering"); //set opacity to 100% }).on("mouseout", ".hovering", function() { $(this).attr("class", ""); //set opacity to 0%, remove "hover" events }); });）的人：

class="struck"

使用jquery交替行颜色

6 个答案: