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 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
js实现全屏漂浮广告移入光标停止移动
Dec 02 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
Apr 03 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 Vue.js
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计算指定日期所在周的开始和结束日期的方法
2015/03/24 PHP
php数组函数array_key_exists()小结
2015/12/10 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
javascript 从if else 到 switch case 再到抽象
2010/07/17 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
纯js实现瀑布流布局及ajax动态新增数据
2016/04/07 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
jQuery实现调整表格单列顺序完整实例
2016/06/20 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
JavaScript生成一个不重复的ID的方法示例
2019/09/16 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
python使用webbrowser浏览指定url的方法
2015/04/04 Python
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
python实现五子棋人机对战游戏
2020/03/25 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
使用IDLE的Python shell窗口实例详解
2019/11/19 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
Pretty Little Thing爱尔兰:时尚女性服饰
2017/03/27 全球购物
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
2014年清明节寄语
2014/04/03 职场文书
派出所班子党的群众路线对照检查材料思想汇报
2014/10/01 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
大足石刻导游词
2015/02/02 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
Redis入门教程详解
2021/08/30 Redis
Java练习之潜艇小游戏的实现
2022/03/16 Java/Android
华为HarmonyOS3.0强在哪? 看看鸿蒙3.0这7个小功能
2023/01/09 数码科技