zoukankan      html  css  js  c++  java
  • js table鼠标点击时变色

    <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>
  • 相关阅读:
    java Socket Tcp 浏览器和服务器(二)
    java Socket Tcp 浏览器和服务器(一)
    java Socket Tcp示例三则(服务端处理数据、上传文件)
    java Socket Udp聊天
    centos 图形界面和命令行界面切换
    python 文件中的中文编码解决方法
    PostgreSQL与MySQL比较(转)
    Python 的开发环境
    Windows 下 pip和easy_install 的安装与使用
    Linux 下的下载文件命令
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434859.html
Copyright © 2011-2022 走看看