• 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>
  • 相关阅读:
    HDU 1828 Picture (线段树:扫描线周长)
    [USACO18OPEN] Multiplayer Moo (并查集+维护并查集技巧)
    NOIP2016 天天爱跑步 (树上差分+dfs)
    NOIP2013 华容道 (棋盘建图+spfa最短路)
    NOIP2015 运输计划 (树上差分+二分答案)
    NOIP2018 前流水账
    luogu P2331 [SCOI2005]最大子矩阵
    luogu P2627 修剪草坪
    CF101D Castle
    luogu P2473 [SCOI2008]奖励关
  • 原文地址:https://www.cnblogs.com/dxmfans/p/9434859.html
Copyright © 2020-2023  润新知