jQuery中将表格以交替颜色显示

非常简单,只需要在页面中增加:

样式:

.odd{
    background-color: #9F9;
}
.even{
    background-color: #FFC;
}

th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

tr.over td{
    background-color: #3FF;
} /*这个将是鼠标高亮行的背景色*/

然后引入js定义即可:

$(document).ready(function()
{
    //标题显示
    //在jQuery1.3.1中有问题,下面的奇偶设定会覆盖,使用1.3.1a则没有问题

    $('th').parent().addClass('tablehead');
    //奇偶交替颜色显示
    $('tr:not([th]):odd').addClass('odd');
    $('tr:not([th]):even').addClass('even');
    //着重显示
    $('td:contains("001")').addClass('highlight');

//鼠标
    $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数
     $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数
     $(this).removeClass("over");}) //移除该行的class

});

页面中的表格不需要任何特殊设置!

//在其他版本中,不使用下面这行,而是直接定义CSS:

th{background:#B5CBE6; color:#039; line-height:20px; height:30px}

然后:

$(document).ready(function()
{
    //标题显示
    //奇偶交替颜色显示
    $('tr:not([th]):odd').addClass('odd');
    $('tr:not([th]):even').addClass('even');
    //着重显示
    $('td:contains("001")').addClass('highlight');

//鼠标
    $("tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数
     $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数
     $(this).removeClass("over");}) //移除该行的class

});