<!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>
<title></title>
<script src="jQuery/scritps/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//为每个td注册一个mouseover事件
$('#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 () {
$(this).attr('isclicked', 'isclicked').siblings().removeAttr
('isclicked'); //等价于setAtttribute()
//点击某个td的时候显示分数
$('#pscore').text($(this).attr('score'));
}).attr('score', function (index) {
return (index + 1) * 20;
});
})
</script>
<style type="text/css">
td
{font-size:50px;
color:Yellow;
cursor:pointer;
}
</style>
</head>
<body>
<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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jQuery/scritps/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//为每个td注册一个mouseover事件
$('#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 () {
$(this).attr('isclicked', 'isclicked').siblings().removeAttr
('isclicked'); //等价于setAtttribute()
//点击某个td的时候显示分数
$('#pscore').text($(this).attr('score'));
}).attr('score', function (index) {
return (index + 1) * 20;
});
})
</script>
<style type="text/css">
td
{font-size:50px;
color:Yellow;
cursor:pointer;
}
</style>
</head>
<body>
<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>