CSS+jquery实现table隔行变色

隔行变色CSS代码：

    body{ margin:0 auto; text-align:center}
    table{margin:0 auto; width:410px}
    table{ border:1px solid #000}
    table tr th{ height:28px; line-height:28px; background:#999}
    table.stripe tr td{ height:28px; line-height:28px; text-align:center;background:#FFF;vertical-align:middle;}
    /* css注释：默认css背景被白色 */
    table.stripe tr.alt td { background:#F2F2F2;}
    /* css 注释：默认隔行背景颜色 */
    table.stripe tr.over td {background:#EEECEB;}
    /* css注释：鼠标经过时候背景颜色 */

隔行变色JQuery代码：

$(document).ready(function(){ //这个就是传说的ready
        $(".stripe tr").mouseover(function(){
           //如果鼠标移到class为stripe的表格的tr上时，执行函数
          $(this).addClass("over");}).mouseout(function(){
                //给这行添加class值为over，并且当鼠标一出该行时执行函数
                $(this).removeClass("over");}) //移除该行的class
      $(".stripe tr:even").addClass("alt");
        //给class为stripe的表格的偶数行添加class值为alt
        // 整理特效
      });

隔行换色HTML代码：

<table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1">
      <tr>
        <th width="92">编号</th>
        <th width="339">网站名称</th>
        <th width="465">网址</th>
      </tr>

      <tr>
        <td width="92">1</td>
        <td width="339"><a href="http:///">CSS教程网</a></td>
        <td width="465"><a href="http:///">www.divcss5.com</a></td>
      </tr>
      <tr>
        <td width="92">2</td>
        <td width="339"><a href="http:///">DIVCSS5</a></td>
        <td width="465"><a href="http:///">www.divcss5.com</a></td>
      </tr>
      <tr>
        <td width="92">3</td>
        <td width="339"><a href="">CSS5</a></td>
        <td width="465"><a href="">www.css5.com.cn</a></td>
      </tr>
    </table>

转自 http:///css-texiao/texiao444.shtml