Jquery 表格分行变色

http://bbs.blueidea.com/thread-2853109-1-1.html

 

jQuery新手教程,高手勿笑。
————————————————————
为了能够更清晰的显示表格中的数据,使用双色表格来显示数据的例子已经屡见不鲜了。我们通常都是使用JavaScript来实现这种效果,可是你知道jQuery中该如何做吗?用jQuery的语句重复JavaScript实现方法吗?不,其实jQuery已经为我们准备好了一切。

先来看看最终的效果是什么样子:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>用jQuery实现表格颜色的交替显示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
  jQuery(".truecolor tr:odd").addClass("color1");
  jQuery(".truecolor tr:even").addClass("color2");
  jQuery(".truecolor tr").hover(function(){
    jQuery(this).addClass("color3")
  },function(){
    jQuery(this).removeClass("color3")
  });
});
</script>
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;}
.truecolor th {background-color:#333; color:#FFF;}
.color1 {background-color:#DDD; color:#333;}
.color2 {background-color:#EEE; color:#333;}
.color3 {background-color:#666; color:#FFF;}
</style>
</head>
<body>
<table width="450" class="truecolor">
  <thead>
    <tr>
      <th>博客</th>
      <th>作者</th>
      <th>网址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>风格之舞</td>
      <td>火德</td>
      <td>www.style5.cn</td>
    </tr>
    <tr>
      <td>赵雷的博客</td>
      <td>赵雷</td>
      <td>zhaolei.asia</td>
    </tr>
    <tr>
      <td>寂寞广场</td>
      <td>魏春亮</td>
      <td>weiliang86.blogcn.com</td>
    </tr>
    <tr>
      <td>淘宝UED</td>
      <td>淘宝</td>
      <td>ued.taobao.com</td>
    </tr>
  </tbody>
</table>
</body>
</html>

现在我要告诉你的是,仅仅三句jQuery代码就实现了上面的效果,是不是很酷?下面我详细的讲一讲如何用jQuery来实现它:

首先建立表格的结构,别忘了给表格定义一个class,我这里定义的class名为truecolor。

复制内容到剪贴板
代码:
<table width="450" class="truecolor">
  <thead>
    <tr>
      <th>博客</th>
      <th>作者</th>
      <th>网址</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>风格之舞</td>
      <td>火德</td>
      <td>www.style5.cn</td>
    </tr>
    <tr>
      <td>赵雷的博客</td>
      <td>赵雷</td>
      <td>zhaolei.asia</td>
    </tr>
    <tr>
      <td>寂寞广场</td>
      <td>魏春亮</td>
      <td>weiliang86.blogcn.com</td>
    </tr>
    <tr>
      <td>淘宝UED</td>
      <td>淘宝</td>
      <td>ued.taobao.com</td>
    </tr>
  </tbody>
</table>

下面是CSS部分,为表格的不同状态定义样式。

复制内容到剪贴板
代码:
<style type="text/css">
.truecolor {border:1px solid #333;text-align:center;} /* 非关键部分:给表格加个边框 */
.truecolor th {background-color:#333; color:#FFF;} /* 非关键部分:给表头定义样式 */
.color1 {background-color:#DDD; color:#333;} /* 关键部分:定义tr的第一种样式 */
.color2 {background-color:#EEE; color:#333;} /* 关键部分:定义tr的第二种样式 */
.color3 {background-color:#666; color:#FFF;} /* 关键部分:定义tr在鼠标悬浮状态的样式 */
</style>

现在样式定义好了,那么怎么把样式应用到表格上呢?下面进入最关键的jQuery部分。

复制内容到剪贴板
代码:
/*
* 请确保你已经在之前引入了jQuery的js文件
* 我这里是使用Wordpress自带的jQuery
* 为避免框架的冲突,我在这里使用jQuery()而不是$()
*/
jQuery(document).ready(function(){
  jQuery(".truecolor tr:odd").addClass("color1");
  // 选择class为.truecolor的对象中的单数行,为该行添加.color1样式
  jQuery(".truecolor tr:even").addClass("color2");
  // 选择class为.truecolor的对象中的双数行,为该行添加.color2样式
  jQuery(".truecolor tr").hover(function(){
    jQuery(this).addClass("color3")
  },function(){
    jQuery(this).removeClass("color3")
  });
  // 格式为:jQuery选取对象.hover(鼠标移到对象触发的函数,鼠标移出对象触发的函数);
  // 鼠标over时,添加.color3样式;鼠标out时,移除.color3样式
});

OK,现在已经大功告成了,快去试试效果吧!

从这个小例子中可以看到jQuery强大的DOM选择器和方便的事件处理,希望你会从此爱上jQuery!

 

个人签名

-------------------------------------

 

图盾 淘宝保护 保护图片 图片防盗

你可能感兴趣的:(JavaScript,jquery,css,XHTML,wordpress)