评分控件

最新推荐文章于 2025-08-15 07:27:47 发布

jiangmurong

最新推荐文章于 2025-08-15 07:27:47 发布

阅读量567

点赞数

CC 4.0 BY-SA版权

文章标签： function xhtml html table

本文链接：https://blog.youkuaiyun.com/jiangmurong/article/details/6435008

本文介绍了一种使用HTML和JavaScript实现的简单评分控件。通过为表格单元格添加点击事件，用户可以轻松地选择评分等级，被选中的单元格背景会变为红色。此控件适用于需要快速集成用户评分功能的网站。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>评分控件</title>
    <script type="text/javascript">
    function indexOf(arr,element){
        for (var i = 0;i < arr.length;i++ ){
            if(arr[i] == element){
               return i;
            }
        }
        return -1;
    }
    function initEvent(){
    //给所有td添加onclick事件
var tableRading = document.getElementById("tableRading");
        var tds = tableRading.getElementsByTagName("td");//取得tableRading下的所有td
        for (var i = 0;i < tds.length;i++){
             var td = tds[i];
             td.onclick = TdOnClick;
             td.style.cursor = "pointer";//让鼠标放到td上显示手形状的光标
        }

     }
    function TdOnClick(){
   //this.style.background = "red";
        var tableRading = document.getElementById("tableRading");
        var tds = tableRading.getElementsByTagName("td");//取得ableRading下的所有td
        var index = indexOf(tds,this);
        for (var i = 0;i <= index;i++){
            var td = tds[i];
            td.style.background = "red";
        }
         for (var i = index+1;i < tds.length;i++){
            var td = tds[i];
            td.style.background = "white";
        }


    }


    </script>

</head>
<body onload="initEvent()">
<table id="tableRading">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr>
</table>
</body>
</html>