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

});