您的位置：首页 > Web前端 > JQuery

[原创]持续给力：jQuery实现表格隔行变色效果案例详解

2011-03-26 14:47 1146 查看

本案例源码

jQeruy20110323.rar

   由于这几天忙着给学生出卷、测试等相关工作，导致这几天博客没有更新太多的东西，从本周开始我会持续的原创一些jQuery方面的文章，也请大家继续关注，我的宗旨是只要发文，一定附上源代码，供各位大本营的朋友免费下载，也请大家转载的时候注明出处

   jQuery是什么？不少同学可能会知道一些，但是可能还不是很全面，下面是给大家详细的先阐述一下基本概念：
JQuery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
关于jQuery更基础的东西，我会随后发出一些JQuery的基础笔记。请大家关注...
   闲话不多说了，要实现表格的隔行变色并不难，可以用多种方法实现，比如：用CSS+div、javascript、jquery等，那下面我们就用javascript dom方法和jQuery的方法来实现。
先看下效果图：
使用javascript Dom 的方法实现效果

8 分钟前上传
下载附件 (25.41 KB)

使用jquery方法实现表格的隔行变色效果

6 分钟前上传
下载附件 (29.73 KB)

js dom 方法实现源码如下：

Code:

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

<style>

.one{

background-color:#FFFF99;}

.two{

background-color:#00CC66;}



.over{

background-color:#FF6600;}



</style>

</head>



<body onload="tableBg();">

<table id="tab" width="503" height="108" border="1" cellpadding="0" cellspacing="0">

      <caption>js Dom实现表格的隔行变色</caption>

  <tr>

    <th>ID</th>

    <th>姓名</th>

    <th>性别</th>

    <th>年龄</th>

    <th>专业</th>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

</body>

</html>

<script language="javascript" type="text/javascript">

var oldclass;

function tableBg(){

var tab=document.getElementById("tab");

var tr=tab.rows;



for(var i=1;i<tr.length-1;i++){



   if(i%2==1){

      tr[i].className="one";

   }else{



      tr[i].className="two";

   }

      //鼠标移动上方的事件

   tr[i].onmouseover=function(){



     //将当前的颜色暂存在oldclass

       oldclass=this.className;

     //改变颜色；

       this.className="over";



   }

   tr[i].onmouseout=function(){

      //还原背景颜色

      this.className=oldclass;

   }



  }

}



</script>

jQuery实现代码：

Code:

<!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>

<style>

.one{

background-color:#FFFFCC;

}

.two{

background-color: #66CC66;}

.over{

background-color:#FF00FF;}

</style>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<script language="javascript" type="text/javascript" src="../include/jquery-1.5.1.min.js"></script>

<script language="javascript" type="text/javascript">

   $(document).ready(function(){



     $("#tab tr:even").addClass("one");

     $("#tab tr:odd").addClass("two");



     $("#tab tr").mouseover(function(){



         $(this).addClass("over");



     });



     $("#tab tr").mouseout(function(){



         $(this).removeClass("over");



     });



   });

</script>

<title>无标题文档</title>

</head>



<body>

<table id="tab" width="503" height="108" border="1" cellpadding="0" cellspacing="0">

      <caption>jQuery 实现表格的隔行变色</caption>

  <tr>

    <th>ID</th>

    <th>姓名</th>

    <th>性别</th>

    <th>年龄</th>

    <th>专业</th>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

</body>

</html>

  本案例源码

jQeruy20110323.rar

[原创地址] [源码下载] [更多原创，多多支持多]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery javascript function html border prototype

相关文章推荐

新的分享

章节导航