评分控件-CSDN博客

本文链接：https://blog.csdn.net/allenlily/article/details/7296830

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
        <script type="text/javascript">
        //获取鼠标下的三角星序号
            function getonclickknumber(arr,element){
                for(var i=0;i<arr.length;i++){
                    if(arr[i]==element){
                        return i;
                    }
                }
              return -1;
                          
            }
            function initclick() {
                var rtable = document.getElementById("ratetable");
                var rtds = rtable.getElementsByTagName("td");
                for (var i = 0; i < rtds.length; i++) {
                    var rtd = rtds[i];
                    rtd.onmouseover = ronclick;
                    rtd.style.cursor="pointer";//让鼠标变成一只手
                }
            }
            function ronclick() {
                var rtable = document.getElementById("ratetable");
                var rtds =rtable.getElementsByTagName("td");
                var index=getonclickknumber(rtds,this);
                for (var i = 0; i <=index;i++) {  //把序号前的变成实心三角心
                   var rtd=rtds[i];
                   rtd.innerText="★";
                   //rtd.style.background="red";
               }
                for(var i = index+1; i < rtds.length; i++) {//把序号后的变成虚心三角心
                    var rtd = rtds[i];
                    rtd.innerText = "☆";
               }
                
            }
        </script>
</head>
<body οnlοad="initclick()">
    <table id="ratetable">
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
        </tr>
    </table>
</body>
</html>