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 常用命令全集
    Boost简介
    postgresql命令行
    Ncurses 命令行图形库
    rsync ssh文件同步
    BusyBox参考
    screen命令
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434859.html
Copyright © 2011-2022 走看看