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>
  • 相关阅读:
    Linux命令笔记
    Linux服务安装集合(1)
    浅谈GIT之通讯协议
    浅谈GIT之底层对象理解
    友情链接
    当黑客被抓是种怎样的体验?
    PHP 中 include 和 require 的区别详解
    论假如有一台无限算力的主机
    msf渗透安卓手机
    aws ec2 安装Elastic search 7.2.0 kibana 并配置 hanlp 分词插件
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434859.html
Copyright © 2011-2022 走看看