脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript表格隔行变色加鼠标移入移出及点击效果

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

 更新时间：2015年04月10日 12:14:26   作者：jingangel  
这篇文章主要介绍了javascript表格隔行变色加鼠标移入移出及点击效果的方法,涉及javascript实现隔行变色及鼠标点击效果的相关技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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实现单选及多选的向右和向左移动实例

    这篇文章主要介绍了基于javascript实现单选及多选的向右和向左移动,涉及javascript针对页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • JavaScript内置日期、时间格式化时间实例代码

    JavaScript内置日期、时间格式化时间实例代码

    JS中的 Date 对象用于处理日期和时间,Date对象和Math对象不一样，Date是一个构造函数，需要实例化后才能使用对象中具体的方法和属性。这篇文章主要给大家介绍了关于JavaScript内置日期、时间格式化时间的相关资料,需要的朋友可以参考下
    2021-05-05
  • 原生JavaScript实现异步多文件上传

    原生JavaScript实现异步多文件上传

    这篇文章主要介绍了原生JavaScript实现异步多文件上传，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • 基于JavaScript实现下拉列表左右移动代码

    基于JavaScript实现下拉列表左右移动代码

    这篇文章主要介绍了基于JavaScript实现下拉列表左右移动效果,代码简单易懂非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-02-02
  • javascript实现电商放大镜效果

    javascript实现电商放大镜效果

    这篇文章主要为大家详细介绍了javascript实现电商放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 关于Ajax的原理以及代码封装详解

    关于Ajax的原理以及代码封装详解

    AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），相信大家对ajax都很熟悉，下面这篇文章主要给大家介绍了关于Ajax原理以及代码封装的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-09-09
  • 了解Javascript的模块化开发

    了解Javascript的模块化开发

    这篇文章主要介绍了了解Javascript的模块化开发,本文讲解了为什么需要模块化开发,模块化开发的形成原因等内容,需要的朋友可以参考下
    2015-03-03
  • JavaScript获取IP获取的是IPV6 如何校验

    JavaScript获取IP获取的是IPV6 如何校验

    项目中遇到了关于IPV6的一些问题，特意做一个专辑说明一下，希望能够帮助有需要的同学！
    2016-06-06
  • JS中Promise函数then的奥秘探究

    JS中Promise函数then的奥秘探究

    then()方法用于指定当前实例状态发生改变时的回调函数。它返回一个新的Promise实例。下面这篇文章主要给大家介绍了关于JS中Promise函数then的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧
    2018-07-07
  • 基于javascript实现右下角浮动广告效果

    基于javascript实现右下角浮动广告效果

    这篇文章主要介绍了基于javascript实现右下角浮动广告效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论