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 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript对数组的常用操作代码 数组方法总汇
Jan 27 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
avalonjs实现仿微博的图片拖动特效
May 06 Javascript
jsTree使用记录实例
Dec 01 Javascript
jQuery Validate插件自定义验证规则的方法
Dec 27 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
详解如何修改 node_modules 里的文件
May 22 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
我常用的几个类
2006/10/09 PHP
自己前几天写的无限分类类
2007/02/14 PHP
PHP操作xml代码
2010/06/17 PHP
Laravel 5框架学习之表单验证
2015/04/08 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JS实现单行文字不间断向上滚动的方法
2015/01/29 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
JS实现手写parseInt的方法示例
2017/09/24 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
inquirer.js一个用户与命令行交互的工具详解
2019/05/18 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
python生成lmdb格式的文件实例
2018/11/08 Python
Python 中包/模块的 `import` 操作代码
2019/04/22 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
应届毕业生个人自荐信范文
2013/11/30 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
《狼》教学反思
2014/03/02 职场文书
初中作文评语大全
2014/04/23 职场文书
给校长的建议书300字
2014/05/16 职场文书
幼儿园教师心得体会范文
2016/01/21 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书