动态操作CSS五角星评分(onMouseOver事件onMouseOut事件set-remove-getAttribute())

本文链接：https://blog.youkuaiyun.com/qq_32077521/article/details/97615619

本文介绍了一个使用HTML、CSS和JavaScript实现的交互式表格案例。表格中的单元格在鼠标悬停、离开和点击时会改变图标显示，通过为单元格添加自定义属性来记录用户的操作状态。此设计适用于创建用户友好的评分或选择系统。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <table id="tbl1" style="font-size:xx-large;color:red">
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
        </tr>
    </table>
    <script type="text/javascript">
        window.onload = function () {
            var tdObjs = document.getElementsByTagName('td');
            for (var i = 0; i < tdObjs.length; i++) {
                //为td注册鼠标悬浮事件
                tdObjs[i].onmouseover = function () {
                    for (var j = 0; j < tdObjs.length; j++) {
                        tdObjs[j].innerHTML = '☆';
                    }
                    for (var j = 0; j < tdObjs.length; j++) {
                        tdObjs[j].innerHTML = '★';
                        if (tdObjs[j] == this) {
                            break;
                        }
                    }
                };
                //为td注册鼠标离开事件
                tdObjs[i].onmouseout = function () {
                    var index = -1;
                    for (var j = 0; j < tdObjs.length; j++) {
                        tdObjs[j].innerHTML = '☆';
                        if (tdObjs[j].getAttribute('isClicked')) {
                            index = j;
                        }
                    }
                    for (var m = 0; m <=index; m++) {
                        tdObjs[m].innerHTML = '★';
                    }
                };
                //为td注册鼠标点击事件
                tdObjs[i].onclick = function () {
                    for (var n = 0; n < tdObjs.length; n++) {
                        tdObjs[n].removeAttribute('isClicked');
                    }
                    for (var k = 0; k < tdObjs.length; k++) {
                        tdObjs[k].innerHTML = '★';
                        if (tdObjs[k] == this) {
                            this.setAttribute('isClicked', 'true');
                            break;
                        }
                    }
                }
            }
        };
    </script>
    <!--<script type="text/javascript">
        window.onload = function () {
            var tdObjs = document.getElementsByTagName('td');
            for (var i = 0; i < tdObjs.length; i++) {
                //注册鼠标悬浮事件
                tdObjs[i].onmouseover = function () {
                    for (var k = 0; k < tdObjs.length; k++) {
                        tdObjs[k].innerHTML = '☆';
                    }
                    for (var m = 0; m < tdObjs.length; m++) {
                        tdObjs[m].innerHTML = '★';
                        if (tdObjs[m] == this) {
                            break;
                        }
                    }
                };
                //注册鼠标离开事件
                tdObjs[i].onmouseout = function () {
                    var index = -1;
                    for (var j = 0; j < tdObjs.length; j++) {
                        tdObjs[j].innerHTML = '☆';
                        if (tdObjs[j].getAttribute('isClicked')) {
                            index = j;
                        }
                    }
                    for (var c = 0; c <= index; c++) {
                        tdObjs[c].innerHTML = '★';
                    }
                };
                //注册鼠标点击事件
                tdObjs[i].onclick = function () {
                    for (var n = 0; n < tdObjs.length; n++) {
                        tdObjs[n].removeAttribute('isClicked');
                    }
                    for (var j = 0; j < tdObjs.length; j++) {
                        this.innerHTML = '★';
                        if (tdObjs[j] == this) {
                            //为td设置一个isClicked属性，用来标记哪个被点击
                            this.setAttribute('isClicked', 'true');
                            break;
                        }
                    }
                };
            }
        };
    </script>-->
</body>
</html>