js 简易评分控件

页面代码：

View Code 
<body>
    <table id="rating">
        <tr>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td>☆</td>
            <td id="score"></td>
        </tr>
    </table>
</body>

js代码：

View Code 
<script type="text/javascript">
        window.onload = function () {
            //找到rating table下的 td
            var table = document.getElementById("rating");
            var tds = table.getElementsByTagName("td");
            //给每个td添加onmouseover事件
            for (var i = 0; i < tds.length; i++) {
                //给每个td添加id
                if (tds[i].id != "score") {
                    tds[i].id = i;
                    tds[i].onmouseover = function () {
                        this.style.cursor = "pointer";
                        var index = this.id;
                        //将鼠标前面的所有五角星变成实心的
                        for (var j = 0; j <= parseInt(index); j++) {
                            tds[j].innerHTML = "★";
                        }
                        //将鼠标后面的所有五角星变成空心
                        for (var i = parseInt(index) + 1; i < tds.length; i++) {
                            if (tds[j].id != "score") {
                                tds[i].innerHTML = "☆";
                            }
                        }
                        //添加评分
                        document.getElementById("score").innerHTML = parseInt(this.id)+1;
                    }
                }
            }

        }
    </script>

 

posted @ 2013-03-18 18:39  海藻  阅读(191)  评论(0)  编辑  收藏  举报