jQuery表格隔行换色

表格隔行换色

表格行间隔行用不同颜色表示,便于信息浏览,同时具有鼠标经过行高亮效果.

传统的做法要在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'" 很麻烦

jQuery只用5行代码就搞定。

<script type="text/javascript" src="jquery.js"></script>

效果展示：

姓名	年龄	MSN	Email
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css
Owen	30	owen.net@hotmail.com	css

JS代码

 <script type="text/javascript">
 $(document).ready(function(){
 $(".stripe_tb tr").mouseover(function(){ //如果鼠标移到class为stripe_tb的表格的tr上时，执行函数
 $(this).addClass("over");}).mouseout(function(){ //给这行添加class值为over，并且当鼠标一出该行时执行函数
 $(this).removeClass("over");}) //移除该行的class
 $(".stripe_tb tr:even").addClass("alt"); //给class为stripe_tb的表格的偶数行添加class值为alt
 });
 </script>

CSS代码

 <style type="text/css"> /*注意选择器的层叠关系*/
 .stripe_tb th{background:#B5CBE6; color:#039; line-height:20px; height:30px}
 .stripe_tb td{padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center}
 .stripe_tb td *{padding:6px 11px}
 .stripe_tb tr.alt td{background:#ecf6fc} /*这行将给所有偶数行加上背景色*/
 .stripe_tb tr.over td{background:#FEF3D1} /*这个将是鼠标高亮行的背景色*/
 </style>

HTML代码

 1 <table class="stripe_tb" border="0" cellpadding="0" cellspacing="0" width="50%">
 2      <!--用class="stripe_tb"来标识需要使用该效果的表格-->
 3      <thead>
 4          <tr>
 5              <th>姓名</th>
 6              <th>年龄</th>
 7              <th>MSN</th>
 8              <th>Email</th>
 9          </tr>
      </thead>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
      <tr>
          <td>Owen</td>
          <td>30</td>
          <td>owen.net@hotmail.com</td>
          <td><a href="http://www.cnblogs.com/css/">css</a></td>
      </tr>
 </table>