哈哈，只是简单的原理（代码可能不是这样写的），明白原理就好～～～～～
<title></title>
<style type="text/css">
td {
font-size: 5px;
cursor: default;
}
</style>
</head>
<body>
<table id="Star">
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
<tr>
<td>☆</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
///未点击之前每个元素都有mouseover,mouseout事件，
///点击之后，每个元素都取消mouseover,mouseout事件，
///每个元素点击(包含此元素)之前变黑，之后(不包含)变白。
var len = 0;
//if (arguments[0].__proto__.constructor.name == ‘MouseEvent‘) {
// idEnd = arguments[0].srcElement.id;
//} if (arguments[0].__proto__.constructor.name == ‘HTMLTableCellElement‘) {
// idEnd = arguments[0].id;
//}
var BGChangNull = function (low, high) {
for (var i = low; i <= high; i++) {
document.getElementById(i).innerHTML = ‘☆‘;
}
};
var BGChangeValue = function (low, high) {
for (var i = low; i <= high; i++) {
document.getElementById(i).innerHTML = ‘★‘;
}
};
var BGChangeAble = function (bool) {
for (var i = 0; i < len; i++) {
document.getElementById(i).onmouseover.disabled = bool;
document.getElementById(i).onmouseout.disabled = bool;
}
};
var BGChangeOver = function () {
var idEnd = this.id;
if (!this.onmouseover.disabled) {
BGChangeValue(0, idEnd);
}
};
var TDChangeOut = function () {
var idEnd = this.id;
if (!this.onmouseout.disabled) {
BGChangNull(0, idEnd);
////var idEnd = this.id;
//BGChangNull(0, this.id);
////this.onmouseover.disabled = true;
}
//else {
// this.onmouseout.disabled = true;
//}
};
var TDOnclick = function () {//点击后改变over事件
var idEnd = this.id;
BGChangeValue(0, idEnd);
BGChangNull(++idEnd, len - 1);
BGChangeAble(true);
document.getElementsByTagName(‘span‘)[0].innerText = idEnd;
};
window.onload = function () {
var tds = document.getElementById(‘Star‘).getElementsByTagName(‘td‘);
len = parseInt(tds.length);
for (var i = 0; i < len; i++) {
tds[i].id = i;
tds[i].onmouseover = BGChangeOver;
tds[i].onmouseout = TDChangeOut;
tds[i].onclick = TDOnclick;
}
var sp = document.createElement(‘span‘);
document.body.appendChild(sp);
};
</script>
百度浏览器效果图：