[原创]持续给力:jQuery实现表格隔行变色效果案例详解
本案例源码 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 的方法实现效果
下载附件 (25.41 KB)
使用jquery方法实现表格的隔行变色效果
下载附件 (29.73 KB)
js dom 方法实现源码如下:
- <!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 οnlοad="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].οnmοuseοver=function(){
- //将当前的颜色暂存在oldclass
- oldclass=this.className;
- //改变颜色;
- this.className="over";
- }
- tr[i].οnmοuseοut=function(){
- //还原背景颜色
- this.className=oldclass;
- }
- }
- }
- </script>
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>
- <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实现表格隔行变色效果案例详解相关推荐
- jQuery 设置表格隔行变色、隔列变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- php在线编辑器fckeditor,[原创]继续给力:PHP中使用FckEditor在线编辑器详解
最近发现不少学生纷纷给我写邮件,问到老师如何才能实现像学生大本营发表笔记时侯的输入文本框,既可以输入我们想输入的内容又可以直接粘贴其他网站的内容,并且保持格式不能发生变化... 还有同学居然提到,老师 ...
- php表格js特效,JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
本文实例讲述了JavaScript表格隔行变色和Tab标签页特效.分享给大家供大家参考,具体如下: 最近一直在看JavaScript知识,偶尔也穿插一点Jquery,感觉Jquery用起来真爽,减少了 ...
- jquery表格隔行变色
结果如下图: <!doctype html> <html> <head><meta http-equiv="content-type" c ...
- 表格隔行变色_CSS实现鼠标悬停高亮
<!doctype html> <html> <head><meta http-equiv="content-type" content= ...
- jQuery选择器实现隔行变色和使用javaScript实现隔行变色
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--什么是选择器? jQuery选择器继承了 ...
- onmouseover+onmouseout :表格隔行变色
表格隔行变色 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF- ...
- 前端-table表格隔行变色
table表格隔行变色 作为一个后端的我,在某公司无前端工程师时,系统那体验自己用起来都想骂人了.今天就纪录一下,自己在后台经常用到的一个小玩意. :nth-child(): 定义和用法 :nth-c ...
- 实现表格隔行变色的方法
css实现表格隔行变色: <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
最新文章
- 牛逼了!一周内咸鱼疯转 3.6w 次,最终被所有大厂封杀!
- spring scope=prototype 学习笔记
- CCF 201409-1 相邻数对
- 【 HDU - 1525 】Euclid's Game(较难找规律,玄学博弈,分析必败点必胜点)
- C# Linq to Entity Lamda方式分组并求和求平均值
- 使用 SYSENTER 和 SYSEXIT 指令执行对系统过程的快速调用
- 阿里云CDN直播架构与双11晚会直播实战
- VS2008(C#)制作网页Tab标签切换方法(四)
- itext poi 学习之旅 (3)读取数据库信息并由excel展现出来
- 【转】SQLServer2005中的增强数据类型VARCHAR(MAX)
- 如何取消服务器自动关机,XP系统怎么取消自动关机?
- 【dxf图形识别】使用C#将线段、圆弧、圆等特征写入dxf文件
- 日期转换 EEE MMM dd HH:mm:ss zzz yyyy
- loadrunner 集合点lr_rendezvous 规则以及操作使用
- Apache网页优化
- nide-js.nt
- 跨境网上收款 找PayPal没错(php如何实现paypal支付)
- 用计算机视觉描述机器人,计算机视觉和机器人视觉概述
- Google Earth Engine APP——UI地图加载一个高程显示标签并显示高程案例
- 模电之静态工作点的定义与目的//2021-2-14
热门文章
- 面向对象C#初级入门精讲(2)C#语言基础-徐照兴-专题视频课程
- Ubuntu系统中编写c语言程序教程
- 小白如何学习运营公众号?
- redis分布式锁--》死锁问题解决策略研究
- wince调节屏幕亮度
- Epalloy8240亨斯迈Huntsman低粘度、低水解氯、反应活性高官能度为2.35的酚醛环氧树脂
- android10全面屏手势 操作图,全面屏手势浪潮来临?安卓Q测试版新发现,手势操作十分便捷...
- 软考相关/初级程序员上午场
- asp毕业设计——基于asp+access的中学网站设计与实现(毕业论文+程序源码)——中学网站
- ARM、X86/Atom、MIPS、PowerPC