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 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
微信小程序 input输入框详解及简单实例
Jan 10 Javascript
loading动画特效小结
Jan 22 Javascript
使用prop解决一个checkbox选中后再次选中失效的问题
Jul 05 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
分析javascript原型及原型链
Mar 18 Javascript
JS实现方形抽奖效果
Aug 27 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
微信支付扫码支付php版
2016/07/22 PHP
Laravel5框架添加自定义辅助函数的方法
2018/08/01 PHP
jQuery图片轮播的具体实现
2013/09/11 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
2014/08/19 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
python实现websocket的客户端压力测试
2019/06/25 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
销售员岗位职责范本
2014/02/03 职场文书
土地转让协议书
2014/04/15 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
大学生英文求职信范文
2015/03/19 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python
Python进程池与进程锁之语法学习
2022/04/11 Python