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

});