<!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>