<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="JQuery/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<style type="text/css">
td {
background-image: url("images/star.JPG");
background-position: 120px 0;
}
</style>
<table id="table1" width="300" height="60" border="1">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<input id="txt1"/>
<script type="text/javascript">
$(function () {
//单元格鼠标悬浮事件
$("td").mouseover(function () {
//设置点击单元格之前的
$(this).prevAll().css({
"background-position": "235px 0"
}).end().css({//设置本身的
"background-position": "235px 0"
});
}).click(function () {//单击事件
$(this).attr("isClick", "isClick");
$(this).siblings().removeAttr("isClick");
$(this).css({
"background-position": "235px 0"
}).prevAll().css({
"background-position": "235px 0"
}).end().nextAll().css({
"background-position": "120px 0"
});
$("#txt1").val(($("td").index($(this)) + 1) * 10 + "分!");
//var objs = $(this).prevAll();//得到单击元素之前的所有元素
//$.map(objs, function (ele, index) { //循环遍历之前的元素添加标记属性
// ele.setAttribute("isClick", "isClick");
//});
//this.setAttribute("isClick", "isClick");//将本身也添加上标记属性
//var objs2 = $(this).nextAll();//得到单机元素之后的所有元素
//$.map(objs2, function (ele,index) {//循环遍历之后的所有元素移除标记属性
// ele.removeAttribute("isClick");
//});
//var $Objs = $("td");//得到所有的元素
//$.map($Objs, function (ele, index) {//循环遍历所有的元素,判断如果存在标记属性,则设置一种样式,如果不存在标记属性,则设置成另一种样式
// if (ele.hasAttribute("isClick")) {
// $(ele).css({
// "background-position": "235px 0"
// });
// }
// else {
// $(ele).css({
// "background-position": "120px 0"
// });
// }
//});
}).mouseleave(function () {//鼠标离开事件
$("td").css({
"background-position": "120px 0"
});
$("td[isClick=isClick]").css({
"background-position": "235px 0"
}).prevAll().css({
"background-position": "235px 0"
}).end().nextAll().css({
"background-position": "120px 0"
});
//var $Objs = $("td");//得到当前页面的所有td标签
//$.map($Objs, function (ele,index) {//循环遍历所有的td标签,判断如果有标记属性,则设置一种样式,如果没有标记属性,则设置成另一种样式
// if (ele.hasAttribute("isClick")) {
// $(ele).css({
// "background-position": "235px 0"
// });
// }
// else {
// $(ele).css({
// "background-position": "120px 0"
// });
// }
//});
});
});
</script>
</body>
</html>
08-30
441
03-03