jQuery实现表格的隔行换色

最新推荐文章于 2023-11-14 23:29:35 发布

lihui4291

最新推荐文章于 2023-11-14 23:29:35 发布

阅读量870

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery相关文章标签： jquery 隔行换色鼠标

本文链接：https://blog.youkuaiyun.com/lihui4291/article/details/72770021

Jquery相关专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用jQuery实现表格行的交替颜色显示及鼠标悬停时的行高亮效果。通过简单的HTML、CSS和jQuery代码，可以轻松为网页表格添加美观的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

传统的做法：在tr里加 onMouseOver="this.className='two'" onMouseOut="this.className='one'"

那么使用jquery怎么做呢？

引入jquery.js文件:

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

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代码:

<table class="stripe_tb" border="0" cellpadding="0" cellspacing="0" width="50%">
       <!--用class="stripe_tb"来标识需要使用该效果的表格-->
       <thead>
           <tr>
               <th>姓名</th>
               <th>年龄</th>
               <th>MSN</th>
               <th>Email</th>
           </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>