<head>
    <title></title>
    <script type="text/javascript">
        //鼠标移动到表格行，被点击的行高亮显示（背景是红色），其他行白色背景。监听每个tr的onclick事件，将点击的背景设置为黄色，其他的设置为白色背景。//对于table、div、span这类型元素没有onfocus（获取焦点的事件（无法触发这些事件。））
        onload = function () {
            //获取行
            var trs = document.getElementById('tb').getElementsByTagName('tr');
            for (var i = 0; i < trs.length; i++) {
                trs[i].onclick = function () {
                    for (var j = 0; j < trs.length; j++) {
                        trs[j].style.backgroundColor = '';
                    }
                    this.style.backgroundColor = 'red';
                };
            }
        };    
    </script>
</head>
<body>
   <table border="1" id="tb" style=" cursor:pointer;">
        <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
         <tr>
            <td>周润发
            </td>
             <td>刘德华
            </td>
             <td>周星驰
            </td>
        </tr>
    </table>
</body>

js table鼠标点击时变色的更多相关文章

  1. JS实现鼠标点击爱心&绘制多边形&每日一言功能

    本篇文章主要介绍我的个人博客 程序猿刘川枫 中页面使用的美化功能(基于JS实现): 1.鼠标点击出现不同颜色爱心特效 2.页面浮动多边形跟随鼠标移动 3.每日一言功能 1.鼠标点击出现爱心特效 经常在 ...

  2. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  3. CTreeCtrl获得鼠标点击时的节点

    原文链接: http://blog.csdn.net/lcalqf/article/details/21321923 1.添加图标 HICON icon[10]; icon[0]=AfxGetApp( ...

  4. js获取鼠标点击的对象,点击另一个按钮删除该对象

    作为js的一名新手,对于所谓的event的了解并不是太多,仅仅根据视频教学中的例子模仿着,写了诸如: function funcname(e) { e=window.event||event };的函 ...

  5. js获取鼠标点击事件的相对位置

    <html><head><title>位置</title><script language="javascript" type ...

  6. [UE4]使用PlayerController获取鼠标点击时的坐标

    1,获取鼠标在当前场景中坐标系统的中的position,加入场景地图的范围是一千平方米,那么这个position的范围也是1000米x1000米. 注册鼠标事件 FInputActionBinding ...

  7. js中鼠标点击、移动和光标移动的事件触发

    事件有三要素:事件源.事件数据.事件处理程序 事件冒泡:当元素嵌套的时候,内部元素激发某个事件后,默认情况下外部元素相应的事件也会跟着依次触发 可以加return false;是阻止默认操作 oncl ...

  8. VirtulBox安装虚拟机（鼠标点击时）0x00000000指令引用的0x00000000内存该内存不能为written错误解决方案

    这个错误并不是所有人都会用到,我用的是WIN7系统,公司的电脑.查找了很多原因后,发现的确是由于系统主题被破解过的原因. 手工恢复风险太高.通过下面的工具就可以直接恢复.UniversalThemeP ...

  9. 用js捕捉鼠标连续点击三次事件怎么实现啊

    var count = 0, timer; document.onclick = function(){ if(count < 2){ if(timer){ clearTimeout(timer ...

随机推荐

  1. jQuery中serializeArray方法的使用及对象与字符串的转换

    使用jQuery中的serializeArray()方法可以方便的将表单中的各个信息,转化为多个{name:xx,value:xx}对象的数组, 再使用遍历的方式可以方便的将数组转化为json对象, ...

  2. c# 安全队列

    using System;using System.Collections.Concurrent;using System.Collections.Generic;using System.Linq; ...

  3. [NPM] Pipe data from one npm script to another

    In an effort to bypass saving temporary build files you can leverage piping and output redirection t ...

  4. uva 1519 - Dictionary Size(字典树)

    题目链接:uva 1519 - Dictionary Size 题目大意:给出n个字符串组成的字典.如今要加入新的单词,从已有单词中选出非空前缀和非空后缀,组成新单词. 问说能组成多少个单词. 解题思 ...

  5. js进阶 10-9 -of-type型子元素伪类选择器

    js进阶 10-9 -of-type型子元素伪类选择器 一.总结 一句话总结:三种和first.last等有关的选择器. 1.:first和:first-child和:first-of-type的区别 ...

  6. 【BZOJ 1012】 [JSOI2008]最大数maxnumber(单调队列做法)

    [题目链接]:http://www.lydsy.com/JudgeOnline/problem.php?id=1012 [题意] [题解] 后加入的元素,如果比之前的元素大, 那么之前的元素比它小的元 ...

  7. cordova 生成发行版apk，并添加证书 – 畅玩Coding

    原文:cordova 生成发行版apk,并添加证书 – 畅玩Coding 首先jdk生成证书. 1.进入jdk安装目录 D:\Java\jdk1.7.0\bin 2.执行命令 keytool -gen ...

  8. 经典卷积神经网络的学习（一）—— AlexNet

    AlexNet 为卷积神经网络和深度学习正名,以绝对优势拿下 ILSVRC 2012 年冠军,引起了学术界的极大关注,掀起了深度学习研究的热潮. AlexNet 在 ILSVRC 数据集上达到 16. ...

  9. 如何在spring quartz类中拿到ServletContext

    ContextLoader.getCurrentWebApplicationContext().getServletContext() web.xml里加个: <listener> < ...

  10. 使用readLine()方法遇到的坑

    程序很简单,客户段从控制台读取用户输入,然后发送至服务器端,主要代码如下 服务端代码: 客户端代码: 结果运行的时候,当开启服务端和客户端后,在客户端的控制台 键盘输入 内容,服务端却没有显示内容 原 ...