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>
  • 相关阅读:
    C#处理json实战
    HDU3994(Folyd + 期望概率)
    POJ1270 Following Orders (拓扑排序)
    HDU 3634 City Planning (离散化)
    HDU4762(JAVA大数)
    POJ3026(BFS + prim)
    POJ1679(次小生成树)
    UVA10487(二分)
    ZOJ 2048(Prim 或者 Kruskal)
    FZU 1856 The Troop (JAVA高精度)
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434859.html
Copyright © 2011-2022 走看看