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 相关文章推荐
jquery ajax 登录验证实现代码
Sep 23 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
javascript中replace( )方法的使用
Apr 24 Javascript
JQuery实现简单的服务器轮询效果实例
Mar 31 Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 Javascript
深入解析Vue 组件命名那些事
Jul 18 Javascript
vue 运用mock数据的示例代码
Nov 07 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 Javascript
tsconfig.json配置详解
May 17 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
解决Vue动态加载本地图片问题
Oct 09 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
PHP下MAIL的另一解决方案
2006/10/09 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
利用Python脚本生成sitemap.xml的实现方法
2017/01/31 Python
详解python字节码
2018/02/07 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python实现的各种常见分布算法示例
2018/12/13 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
创建市级文明单位实施方案
2014/03/01 职场文书
集体生日活动方案
2014/08/18 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
大学生个人总结范文
2015/02/15 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL