<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. 洛谷 P1984 [SDOI2008]烧水问题

    洛谷 P1984 [SDOI2008]烧水问题 题目描述 把总质量为1kg的水分装在n个杯子里,每杯水的质量均为(1/n)kg,初始温度均为0℃.现需要把每一杯水都烧开.我们可以对任意一杯水进行加热. ...

  2. 小强的HTML5移动开发之路（48）——（小练习）新闻订阅系统【1】

    一.总体设计 二.数据库设计 --新闻类别表 create table news_cate( news_cateid int primary key auto_increment, news_icon ...

  3. kali 系统的源

    sources.list deb http://http.kali.org/kali kali-rolling main non-free contrib deb http://mirrors.ust ...

  4. [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE

    Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, ...

  5. [NPM] Create a bash script to replace a complex npm script

    In this lesson we will look at pulling out complex npm scripts into their own external bash scripts. ...

  6. Elasticsearch v5.4

    在Windows上安装Elasticsearch v5.4.2   前言 最近项目里为了加快后台系统的搜索速度,决定接入开源的搜索引擎,于是大家都在对比较常用的几个开源做技术调研,比如Lucene+盘 ...

  7. 29个月过去了,CSDN排名前200了：排名不断靠前的过程中，自己的技术水平和竞争力一定会不断向上

    刚刚在csdn博客又发表了一篇,工作问题总结,突然发现,我的博客排名终于进入前200了. 这又是一个伟大的里程碑啊. 在过去29个月的时间里,排名从"千里之外" 到"19 ...

  8. Matlab Tricks（二十五）—— plot 属性

    marker: 边缘:'MarkerEdgeColor', [],(RGB 配色) 填充:'MarkerFaceColor', [](RGB 配色)

  9. JavaScript创建日志文件并记录时间的做法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 try { var WSShell = WScript.CreateObject("WScript.Shel ...

  10. android制，点击EditText时刻，隐藏系统软键盘，显示光标

    由于项目中要用自己定义的随机键盘,所以必须得屏蔽系统软键盘,可是在4.0的測试系统来看,使用editText.setInputType(InputType.TYPE_NULL)方法固然能隐藏键盘,可是 ...