<!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. 一点总结-关于debug比赛

    上午的题目是: 1. main里面定义的变量必须手动初始化,使用memset或者其他,函数外或者函数内,会进行初始化为0. 2. 最长回文子串的马拉车manacher算法,不会写! 3. 数字三角形d ...

  2. 【风马一族_C】进制转化

    #include "stdio.h" #include "Math.h" #define number 50 //设置数组的长度 int num10; //十进 ...

  3. Android Audio Play Out Channel

    1: 7嘴8舌 扬声器, 耳机, 和听筒 就是通过: audiomanager.setmode(AudioManager.MODE_IN_COMMUNICATION)audiomanager.setS ...

  4. Linux上iptables防火墙的基本应用

    1.安装iptables防火墙 yum install iptables -y 2. 清除已有的iptables规则 iptables -F iptables -X iptables -Z 3.显示i ...

  5. IOS_问题: Xcode8 安装KSImageName插件, 编代码就崩了

    Xcode 8之后, KSImageName插件就不能用了,如果安装了,就会导致一写英文代码Xcode 就崩了. 解决方法: 把这个插件删除,重启了一下xcode就可以了, 如果重启没用, 可以尝试下 ...

  6. 11g RAC r2 的启停命令概述1

    目标: 熟悉主要进程的启停顺序 了解独占模式 -excl crsctl start crs与crsctl start cluster 区别 1.熟悉主要进程的启停顺序 1.1 启动节点rac1: [r ...

  7. 每日一“酷”之string

    介绍:string模块可以追溯到最早的Python版本中.现在很多的被移植为str和unicode对象的方法,在python3.0中会被完全去除.string模块中,有很多有用的常量和累,用来处理st ...

  8. MySQL显示连接的数据库名

    在默认下,MySQL在use databasename的时候,是不显示连接的库名! mysql> show databases;+--------------------+| Database ...

  9. android架构介绍

    Android其本质就是在标准的Linux系统上增加了Java虚拟机Dalvik,并在Dalvik虚拟机上搭建了一个JAVA的application framework,所有的应用程序都是基于JAVA ...

  10. iOS 进阶 第七天(0403)

    0403 QQ列表展开收起的原理 更改 numbersOfRowsInSection 的返回的数目,为0则收起group,不为零则为展开.先修改模型数据 刷新对应的表格 代码如下: 这个地方会出现一个 ...