<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<script>

    window.onload=function(){

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

        var oldColor="";

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

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

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

                oldColor=this.style.background;

                this.style.background="green";

            }

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

               this.style.background=oldColor;

            }

            if(i%2){

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

            }else{

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

            }

        }

    }

</script>

</head>

<body>

    <table id="tab1" border='1' width="500px">

        <thead>

            <td>ID</td>

            <td>姓名</td>

            <td>年龄</td>

        </thead>

        <tbody>

            <tr>

                <td>1</td>

                <td>张三</td>

                <td>12</td>

            </tr>

            <tr>

                <td>1</td>

                <td>李四</td>

                <td>34</td>

            </tr>

            <tr>

                <td>1</td>

                <td>王五</td>

                <td>40</td>

            </tr>

            <tr>

                <td>1</td>

                <td>李四</td>

                <td>34</td>

            </tr>

            <tr>

                <td>1</td>

                <td>王五</td>

                <td>40</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

大多数人不知道的表格其他写法的onmouseover效果的更多相关文章

  1. [Swift通天遁地]二、表格表单-(4)使用系统自带的下拉刷新控件，制作表格的下拉刷新效果

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  2. 很多人不知道的Python 炫技操作：条件语句的写法

    有的人说 Python 是一门 入门容易,但是精通难的语言,这一点我非常赞同. Python 语言里有许多(而且是越来越多)的高级特性,是 Python 发烧友们非常喜欢的.在这些人的眼里,能够写出那 ...

  3. 很多人不知道的Python 炫技操作：海象运算符的三种用法

    Python 版本发展非常快,如今最新的版本已经是 Pyhton 3.9,即便如此,有很多人甚至还停留在 3.6 或者 3.7,连 3.8 还没用上. 很多 Python 3.8 的特性还没来得及了解 ...

  4. 大多数人不知道的：HashMap链表成环的原因和解决方案

    引导语 在 JDK7 版本下,很多人都知道 HashMap 会有链表成环的问题,但大多数人只知道,是多线程引起的,至于具体细节的原因,和 JDK8 中如何解决这个问题,很少有人说的清楚,百度也几乎看不 ...

  5. 初始CSS3小知识【99%人不知道的小技巧】

    一.引入样式    1.行内样式表   <h1 style="color: red;font-size: 18px;">10-30</h1>     2.内 ...

  6. 10个很多人不知道的Redis使用技巧

    前言 Redis 在当前的技术社区里是非常热门的.从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路.随之而来的一系列最佳实践,使得大多数人可以正 ...

  7. 一般人不知道的Flask框架SQLAlchemy的那些事

    目录 SQLAlchemy 1.介绍 2.简单使用(能创建表,删除表,不能修改表) 3.一对多关系 4.多对多关系 5.操作数据表 6.基于scoped_session实现线程安全 7.基本增删查改 ...

  8. 一个很多人不知道的SpringBoot小技能！！

    大家好,我是冰河~~ 最近,发现很多小伙伴在修改了SpringBoot的配置文件后,都要重新编译整个项目,极大的浪费了开发时间.我身边就有很多小伙伴一直是这样做的.那么,有没有什么方式能够修改配置文件 ...

  9. 5种做法实现table表格中的斜线表头效果

    table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法 直接去 ...

随机推荐

  1. 关于Docker清理

    在Docker的日常使用中,我们或许偶尔遇到下面这些情况: 12345678 $ docker-compose ps[27142] INTERNAL ERROR: cannot create temp ...

  2. 从TP-Link到雷蛇，纷纷入局智能手机业到底想干什么？

    ​   "眼看他起朱楼,眼看他宴宾客,眼看他楼塌了",这句形容世态炎凉的话其实与智能手机市场更为相像.诺基亚的辉煌与没落.黑莓的强势与消声无迹.摩托罗拉的数次易手.小米的横空出世与 ...

  3. JavaScript 语言精粹笔记3

    方法 毒瘤 糟粕 记录一下阅读蝴蝶书的笔记,本篇为书中最后一部分:方法.代码风格.优美的特性.毒瘤.糟粕等. 方法 这一章主要介绍了一些方法集.这里写几个我不太熟悉的方法和要点吧. array.joi ...

  4. python 生成随机数、生成 uuid

    1. 使用 uuid.uuid1 产生一个随机数 2. 在使用 random.sample() 产生一个随机字符串 3. 将两者进行拼接 import uuid import random def r ...

  5. javascript常用工具函数总结(不定期补充)未指定标题的文章

    前言 以下代码来自:自己写的.工作项目框架上用到的.其他框架源码上的.网上看到的. 主要是作为工具函数,服务于框架业务,自身不依赖于其他框架类库,部分使用到es6/es7的语法使用时要注意转码 虽然尽 ...

  6. 解决oninput事件在中文输入法下会取得拼音的值的问题

    在做搜索等功能时,很多时候我们需要实时获取用户输入的值,而常常会得到类似 w'm 这样的拼音.为了解决这个问题,我在网上搜索了下相关问题,发现了两个陌生的事件:compositionstart 和 c ...

  7. 解决微信小程序视频组件层级过高的问题

    本文首发于我的个人博客:http://www.fogcrane.org 前言 在微信小程序的开发中,总有一些"VIP"组件,他们的层级,高得让人抓狂,总是凌驾于很多其他低层级组件之 ...

  8. Linux——如何将Red Hat Enterprise Linux 6的语言改为中文？

    第一步,打开终端,输入su -,获取超级用户权限,输入密码. 第二步,输入cd /etc/sysconfig,进入设置目录. 第三步,输入vi i18n,进入到配置文件. 第四步,按 ‘i’键,进入编 ...

  9. Navicat for MySQL12破解

    本文摘抄自:https://blog.csdn.net/zhangli0910/article/details/83785147,https://blog.csdn.net/mmake1994/art ...

  10. Vue项目三、项目中碰到的问题详解

    一.组件的划分创建 方法一: 把页面上需要复用的模块,拆分成组件.比如,页面的header.footer.面包屑.弹出框等拆分成组件.所以在src中应该有一个文件夹(components)专门放这些会 ...