javascript鼠标事件

zhang_xaio_yu

已于 2022-05-06 19:13:40 修改

阅读量114

点赞数

文章标签： javascript 前端开发语言

于 2022-03-14 18:40:59 首次发布

本文链接：https://blog.csdn.net/zhang_xaio_yu/article/details/123485376

版权

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        window.onload=function (){
            //当页面加载完成,我们需要绑定各种事件
            //根据id获取到表格
            var tianlonbabu = document.getElementById("tianlonbabu");
            //获取表格中所有的行
            var rows = tianlonbabu.rows;
            for (var i = 0; i < rows.length; i++) {
                var tr = rows[i];
                //绑定鼠标悬浮以及离开时设置背景颜色
                tr.mouseover=showBGColoer();
                tr.mouseout=clearBGcoloer();
                var td = tr.cells;
                var tdElement = td[1];
                tdElement.mouseover=showHand();
            }

        }
//当鼠标覆盖时显示背景颜色
        function showBGColoer(){
            //event 事件
            //event.srcElement 事件源
            //event.srcElement.tagName=="TD"
            if (event&&event.srcElement&&event.srcElement.tagName=="TD"){
                var td=event.srcElement;
                var tr=td.parentElement;
                //如果想要通过js代码设置某个节点的样式,则要加上.style

                tr.style.backgroundColor="blue";
                //tr.cells 表示获取这个tr中的所有单元格
                var tds=tr.cells;
                for (var i = 0; i < tds.length; i++) {
                    tds[i].style.color="white";
                }
            }
        }
        //当鼠标日开始,取消背景颜色
        function clearBGcoloer(){
            if (event&&event.srcElement&&event.srcElement.tagName=="TD"){
                var td=event.srcElement;
                var tr=td.parentElement;
                tr.style.backgroundColor="transparent";//背景改变
                var tds = tr.cells;
                for (var i = 0; i < tds.length; i++) {
                    tds[i].style.color="black";//字体改变
                }


            }
        }

        //当鼠标覆盖时改变鼠标手势
        function showHand(){
            if (event&&event.srcElement&&event.srcElement.tagName=="TD"){
                var td=event.srcElement;
                //cursor:光标
                td.style.cursor="hand";
            }
        }

    </script>
</head>
<body>
<table id="tianlonbabu" border="1" width="600" cellspacing="0" cellpadding="4"><!--单元格填充-->
    <tr  align="center" >
        <th>姓名</th>
        <th>门派</th>
        <th>成名绝技</th>
        <th>内功值</th>
    </tr>
    <tr align="center" >
        <td>乔峰</td>
        <td>丐帮</td>
        <td>降龙十八掌</td>
        <td>100000</td>
    </tr>
    <tr align="center">
        <td>虚竹</td>
        <td>灵鹫宫</td>
        <td>北冥神功</td>
        <td>15000</td>
    </tr>
    <tr align="center" >
        <td>扫地僧</td>
        <td>少林寺</td>
        <td>罗汉拳</td>
        <td>15000</td>
    </tr>
</table>
</body>
</html>