javascript表格隔行变色加鼠标移入移出及点击效果的方法


Posted in Javascript onApril 10, 2015

本文实例讲述了javascript表格隔行变色加鼠标移入移出及点击效果的方法。分享给大家供大家参考。具体分析如下:

表格隔行变色,也是一个提高用户体验的js效果。

效果实现:

表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。
鼠标移入某行时变颜色,移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。

表格点击变色。便于用户选中自己想保留的项。
 
说明:

i%2 每个数和2取模的值,只有0和1两种,这样就可以实现隔行变色的效果
tables_li[i].onoff = 1;  为了实现点击变色,鼠标移入移出时,颜色不被覆盖。
 
上代码:

<!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>
table{
border-collapse:collapse
}
table td{
height:26px;
font-size:12px;
color:#333;
border:1px solid #09c;
text-align:center;
padding:0 10px;
}
</style>
</head>
<body>
<script>
window.onload = function(){
 var tables = document.getElementById("tables");
 var tables_li = tables.getElementsByTagName("tr");
 var i=0;
 var len = tables_li.length;
 for(i=0; i<len; i++){
  tables_li[i].onoff = 1;
  tables_li[i].index = i;
  tables_li[i].style.backgroundColor = i%2?"#ace":"";
  tables_li[i].onmouseover = function(){
   if(this.onoff == 1){
   this.style.backgroundColor = "#06c";
   }
  }
  tables_li[i].onmouseout = function(){
   if(this.onoff == 1){
    this.style.backgroundColor = this.index%2?"#ace":"";
   }
  }
  tables_li[i].onclick = function(){
   if(this.onoff == 1){
    this.onoff = 0;
    this.style.backgroundColor = "#069";
   }else{
    this.onoff = 1;
    this.style.backgroundColor = this.index%2?"#ace":"";
   }
  }
 }
}
</script>
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" id="tables">
 <tr>
 <td>1</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>2</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>3</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>4</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>5</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>6</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>7</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>8</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>9</td>
 <td>内容内容</td>
 </tr>
 <tr>
 <td>10</td>
 <td>内容内容</td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
微信开发 微信授权详解
Oct 21 Javascript
JS调用Android、Ios原生控件
Jan 06 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
ECMAScript6 新特性范例大全
Mar 24 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
JS实现炫酷轮播图
Nov 15 Javascript
js改变embed标签src值的方法
Apr 10 #Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 #Javascript
js实现简单选项卡与自动切换效果的方法
Apr 10 #Javascript
js实现星星打分效果的方法
Jul 05 #Javascript
js实现简单的可切换选项卡效果
Apr 10 #Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
You might like
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
jQuery ajax请求struts action实现异步刷新
2017/04/19 jQuery
vue-router history模式下的微信分享小结
2018/07/05 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
django之session与分页(实例讲解)
2017/11/13 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Random 在 Python 中的使用方法
2018/08/09 Python
浅谈pycharm的xmx和xms设置方法
2018/12/03 Python
python实现Virginia无密钥解密
2019/03/20 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python定义一个Actor任务
2020/07/29 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
学校办公室主任职责
2013/12/27 职场文书
大学生旷课检讨书
2014/01/22 职场文书
行政部经理助理岗位职责
2014/06/15 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
企业贷款委托书格式
2014/09/12 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
redis击穿 雪崩 穿透超详细解决方案梳理
2022/03/17 Redis
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
深入理解 Golang 的字符串
2022/05/04 Golang
Go微服务项目配置文件的定义和读取示例详解
2022/06/21 Golang