<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script type="text/javascript">

        window.onload = function () {

            var oTab = document.getElementById("tb1");

            var oldColor = "";

            /*--------------------------拓展--开始------------------------------*/

            // var name = oTab.getElementsByTagName("tbody")[0].getElementsByTagName("tr")[0].getElementsByTagName("td")[1].innerHTML;

            /*

            表格的应用

            1.获取

             tBodies.tHead,tFoot,rows,cells

             2.各行变色

             鼠标移入亮度显示

             3.添加删除一行

            // alert(oTab.tBodies[0].rows[0].cells[1].innerHTML);

            // alert(name);

            */

            /*--------------------------拓展--结束------------------------------*/

            for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {

                oTab.tBodies[0].rows[i].onmouseover = function () {

                    //先把之前的颜色存入到oldColor变量中

                    oldColor = this.style.background;

                    this.style.background = "green";

                }

                oTab.tBodies[0].rows[i].onmouseout = function () {

                    //把oldColor中之前的颜色重新加上

                    this.style.background = oldColor;

                }

                //

                if (i % 2) {

                    //隔行变色

                    oTab.tBodies[0].rows[i].style.background = "#CCC";

                }

            }

        }

    </script>

</head>

<body>

    <table id="tb1" border="1" style="width: 500px;">

        <thead>

            <tr>

                <td>ID</td>

                <td>姓名</td>

                <td>年龄</td>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>Cupid</td>

                <td>66</td>

            </tr>

            <tr>

                <td>2</td>

                <td>Fly</td>

                <td>45</td>

            </tr>

            <tr>

                <td>3</td>

                <td>Sky</td>

                <td>23</td>

            </tr>

            <tr>

                <td>4</td>

                <td>Windy</td>

                <td>98</td>

            </tr>

            <tr>

                <td>5</td>

                <td>Snow</td>

                <td>09</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

　　

Javascript操作表格隔行变色的更多相关文章

  1. JavaScript 实现表格隔行变色

    JavaScript 实现表格隔行变色 版权声明:未经授权,严禁分享! 构建界面 界面HTML代码 <style> #data,th,td{ border: 1px solid #aaaa ...

  2. JavaScript实例---表格隔行变色以及移入鼠标高亮

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  3. 表格的一些原生js操作（隔行变色，高亮显示，添加删除，搜索）

    看着网上的视频教程,虽说还是有点简单,但还是不免想记录下.这些操作包括(隔行变色,高亮显示,添加删除,搜索功能),而这儿就是涉及table的原有属性“tBodies” “rows” “cells”等几 ...

  4. JavaScript for循环实现表格隔行变色

    本代码主要演示的是for循环, <!doctype html> <html lang="en"> <head> <meta charset ...

  5. jquery插件之表格隔行变色并鼠标滑过高亮显示

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现表格隔行变色,且鼠标移动在表格的某一行上时,该行能高亮显示.整体代码如 ...

  6. 用JQuery实现表格隔行变色和突出显示当前行

    用JQuery实现表格隔行变色和突出显示当前行 上源码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "htt ...

  7. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. 表格隔行变色_jQuery控制实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  9. jQuery 表格隔行变色插件

    jQuery提供了用于扩展jQuery功能的方法,即jQuery.fn.extend()方法和jQuery.extend()方法. 基本的JS框架代码如下: ;(function($) { $.fn. ...

随机推荐

  1. 4_1 wp8数据绑定与独立存储空间[wp8特色开发与编程技巧]

    Wp8数据绑定与独立存储空间 数据绑定为基于 Silverlight 的应用程序提供了一种显示数据并与数据进行交互的简便方法. 数据的显示方式独立于数据的管理. UI 和数据对象之间的连接或绑定使数据 ...

  2. SQL语句执行顺寻

    SQL语句执行的时候是有一定顺序的.理解这个顺序对SQL的使用和学习有很大的帮助. 1.from 先选择一个表,或者说源头,构成一个结果集. 2.where 然后用where对结果集进行筛选.筛选出需 ...

  3. Mentor PADS 9.5下载安装及破解指南

    Pads,是一款用于设计.模拟电子线路及设计电路板的电脑软件,原由Innoveda公司开发,其后改名为PowerPCB,在2002年4月Innoveda被Mentor Graphics收购,近年再次改 ...

  4. centOS 一键php环境安装-php博弈

    我是方少,闲着没事,感觉每次编译安装,再修改php,mysql,redis,nginx配置文件觉得把大好的青春时间都浪费掉了.如是想着,怎样一键安装 php环境和相关配置.于是拜读了一下lnmp的一键 ...

  5. 通过百度地图API定位--第三方开源--百度地图（一）

    1.把百度地图定位API(下载地址:http://lbsyun.baidu.com/sdk/download?selected=location)里面的libs复制到自己的项目libs里面 2.进行相 ...

  6. 通过xsd生成xml类

    步骤二:使用VS2010 Tools中的命令提示窗口 如下图所示 执行结果:生成myschema.xsd对应的C#类文件. 命令剖析: /c  生成对应的类文件 /l:cs 类文件使用C#语言 /ou ...

  7. hdu 5451 Best Solver 矩阵循环群+矩阵快速幂

    http://acm.hdu.edu.cn/showproblem.php?pid=5451 题意:给定x    求解 思路: 由斐波那契数列的两种表示方法, 之后可以转化为 线性表示 F[n] = ...

  8. 未能加载文件或程序集“Report.Basic”或它的某一个依赖项。试图加载格式不正确的程序

    出现问题如下: 解决办法: 这是由于没有开启32位程序兼容模式 具体操作如下:找到对应的程序池--------高级设置-------修改“启用32位应用程序”状态修改为true

  9. MySQL监控工具-orztop

    先安装orzdba,链接:http://blog.itpub.net/28939273/viewspace-1875895/ 安装依赖的包:[root@hank-yoon servers]# yum ...

  10. Intel格式和AT&T格式汇编区别

    一.AT&T 格式Linux 汇编语法格式 在 AT&T 汇编格式中,寄存器名要加上 '%' 作为前缀:而在 Intel 汇编格式中,寄存器名不需要加前缀.例如: AT&T 格 ...