<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. 监听text等的改变事件

    oninput事件是html5的标准事件,支持ie9和以上以及其他的火狐啊谷歌啊等浏览器 ie9以下的可以用onpropertychange <head>     <script t ...

  2. 【浅墨Unity3D Shader编程】之中的一个 夏威夷篇：游戏场景的创建 &amp; 第一个Shader的书写

    本系列文章由@浅墨_毛星云 出品.转载请注明出处. 文章链接:http://blog.csdn.net/poem_qianmo/article/details/40723789 作者:毛星云(浅墨)  ...

  3. [Angular] Scrolling the Message List To the Bottom Automatically Using OnChanges

    Let's say the message list can Input (messages) from parent component, and what we want to do is whe ...

  4. Android 让文本输入框默认不获取焦点

    项目中有个检索功能,页面上有个EditText输入框,打开页面后,焦点默认在EditText上,这样的话软键盘默认就会显示出来,占据大半个屏幕. 后来想办法将这个给去掉了,原先考虑着将焦点赋给页面上的 ...

  5. Android 设置图片透明度

    我了解的比较快捷的ImageView设置图片的透明度的方法有: setAlpha(); setImageAlpha(); getDrawable().setAlpha(). 其中setAlpha()已 ...

  6. 查看MySQL数据的连接

      show processlist;   select host from information_schema.processlist;   查看那台机器及连接数 select host, cur ...

  7. 关于用WebView或手机浏览器打开连接问题

    1.通常情况下 大家可能都想使用WebView打开网页内部链接而不想再调用手机浏览器,我们可以通过以下两种方法实现: (1)为WebView设置一个WebViewClient,并重写shouldOve ...

  8. duplicate symbols for architecture

    duplicate symbols for architecture   XCODE编译的时候报错:duplicate symbols for architecture armv7   1.首先排查是 ...

  9. 利用WPF建立自己的3d gis软件（非axhost方式）（五）在鼠标点击的位置增加UI

    原文:利用WPF建立自己的3d gis软件(非axhost方式)(五)在鼠标点击的位置增加UI 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bP ...

  10. WPF中PasswordBox控件的Password属性的数据绑定

    原文:WPF中PasswordBox控件的Password属性的数据绑定 英文原文:http://www.wpftutorial.net/PasswordBox.html 中文原文:http://bl ...