js评分控件

<!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>
<script type="text/javascript">

      //总体效果:鼠标悬浮,显示实心★;离开,显示空心☆;点击选择,显示点击的☆之前的所以为实心★.
        window.onload = function () {
            //获取table的单元格
            var tds = document.getElementById('tbl').getElementsByTagName('td');
            //遍历,为每个单元格注册一个onmouseover事件
            for (var i = 0; i < tds.length; i++) {
                tds[i].onmouseover = function () {
                    var tds1 = document.getElementById('tbl').getElementsByTagName('td');
                    //1.将所有单元格初始化'空心';
                    for (var k = 0; k < tds1.length; k++) {
                        tds1[k].innerHTML = '☆';
                    }
                    //2.从0开始的每个单元格到当前鼠标移动的单元格都变成"★";
                    for (var j = 0; j < tds1.length; j++) {
                        tds1[j].innerHTML = "★";
                        if (tds1[j] == this) {
                            break;
                        };
                    };
                };

                //鼠标onmouseout事件.
                tds[i].onmouseout = function () {
                    var tds1 = document.getElementById('tbl').getElementsByTagName('td');
                    //1.将所有单元格初始化'空心';
                    for (var k = 0; k < tds1.length; k++) {
                        tds1[k].innerHTML = '☆';
                    }

                    var n; //记录值
                    for (var x = 0; x < tds1.length; x++) {
                        if (tds1[x].getAttribute('isClicked')) {
                            n = x;
                        }
                    }
                    //显示最近一次点击的效果.这个for中的n很关键.
                    for (var x2 = 0; x2 <=n; x2++) {
                        tds1[x2].innerHTML = '★';
                    };
                };

                //为每个单元格注册一个单击事件,记住最近一次操作效果
                tds[i].onclick = function () {

                    var tdl3 = document.getElementById('tbl').getElementsByTagName('td');
                    //将td所有的isClick属性删除.
                    for (var n = 0; n < tdl3.length; n++) {
                        tdl3[n].removeAttribute('isClicked');
                    }
                    //为元素动态添加一个属性isClicked;
                    this.setAttribute('isClicked', true);

                }
            };
        }
    </script>
</head>
<body>
    <table id="tbl" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>☆</td>
              <td>☆</td>
                <td>☆</td>
                  <td>☆</td>
                    <td>☆</td>
        </tr>
    </table>
</body>
</html>