<p id="pscore">
</p>
<table id="t1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
<td>
☆
</td>
</tr>
</table>
</body>
jquery代码:
//为每一个td注册一个mouseover事件
$(function () {
$('#t1 td').mouseover(function () {
$(this).text('★').prevAll().text('★').end().nextAll().text('☆');
}).mouseout(function () {
//当鼠标离开时把所有的td都变成☆,把具有isclicked属性的td以及之前的td,变成★
$('t1 td').text('☆');
$('#t1 td[isclicked=isclicked]').text('★').prevAll().text('★');
}).click(function () {
//点击时给当前的td增加isclicked属性
$(this).attr('isclicked', 'isclicked').siblings().removeAttr('isclicked');
//点击某个td时显示分数
$('#pscore').text($(this).attr('score'));
}).attr('score', function (index) {
return (index + 1) * 10;
});
})