<style>
td{
font-size:50px;
color:yellow;
cursor:pointer;
}
</style>
<script type="text/javascript">
window.onload = function () {
//获取所有td
var tds = document.getElementById('tabRate').getElementsByTagName('td');
//为每个td注册一个onmouseover和onmouseout事件
for (var i = 0; i < tds.length; i++) {
//鼠标悬浮事件
tds[i].onmouseover = function () {
//设置从第0个开始到当前鼠标移动到td位置为实心五角星
for (var c = 0; c < tds.length; c++) {
tds[c].innerHTML = '★';
if (tds[c] == this) {
break;
}
}
};
//鼠标离开事件
tds[i].onmouseout = function () {
for (var c = 0; c < tds.length; c++) {
tds[c].innerHTML = '☆';
if (tds[c] == this) { break };
}
};
//为每个td注册单击事件
tds[i].onclick = function () {
for (var c = 0; c < tds.length; c++) {
tds[c].removeAttribute('isclicked');
}
this.setAttribute('isclicked', 'isclicked');
};
}
}
</script>
</head>
<body>
<table id="tabRate" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
<td>☆</td>
</tr>
</table>
</body>
