表格隔行变色jq代码

1、在编辑前先引入jq库。，否则没有隔行变色的效果。

表格代码：

<table width="400" border="0" class="stripe" cellpadding="0" cellspacing="1"> 

  <tr> 

    <th width="92">1</th> 

    <th width="339">2</th> 

    <th width="465">3</th> 

  </tr> 

  <tr> 

    <td width="92">4</td> 

    <td width="339">5</td> 

    <td width="465">6</td> 

  </tr> 

  <tr> 

    <td width="92">7</td> 

    <td width="339">8</td> 

    <td width="465">9</td> 

  </tr> 

  <tr> 

    <td width="92">10</td> 

    <td width="339">11</td> 

    <td width="465">12</td> 

  </tr>   

</table> 

2、此变色换色原理是，通过JQ识别table tr td的双数单数，even以及odd，对应单数双数给予赋予不同CSS样式，通过不同背景，即可实现隔行换色变色效果，当鼠标经过时候JQ调用另外设置的tr td背景，实现鼠标经过背景颜色也跟着变化。下图是原始默认是表格样式：

3、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;} 

table.stripe tr.alt td { background:#F2F2F2;} 

table.stripe tr.over td {background:#EEECEB;} 

4、隔行变色jq代码

$(document).ready(function(){    

    $(".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 

  });