下面是html源码，其中需要用到“jquery.min.js”文件和一个“rate.png”文件。
rate.png文件如下：
html源码文件如下：
<!DOCTYPE html>
<!-- saved from url=(0045)http://www.nolure.com/p/demo/jquery-rate.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>jquery星级评论打分组件</title>
<script src="./jquery.min.js"></script>
<link rel="stylesheet" href="http://www.nolure.com/p/css/base.css">
<script>
function onScoreChanged(){
rs = "";
tr = document.getElementById("table_score").getElementsByTagName("tr");
if(tr.length == 0) return;
// get table header
header = tr[0];
for(i=1; i<tr.length; i++){
td = tr[i].getElementsByTagName("td");
rowLabel = td[0].innerHTML;
for(j=1; j<td.length; j++){
}
}
}
/*
* 通用打分组件
* callBack打分后执行的回调
* this.Index:获取当前选中值
*/
var pRate = function(box){
this.Index = null;
var B = $("#"+box),
rate = B.children("i"),
w = rate.width(),
n = rate.length,
me = this;
for(var i=0;i<n;i++){
rate.eq(i).css({
'width':w*(i+1),
'z-index':n-i
});
}
rate.hover(function(){
var S = B.children("i.select");
$(this).addClass("hover").siblings().removeClass("hover");
if($(this).index()>S.index()){
S.addClass("hover");
}
},function(){
rate.removeClass("hover");
})
rate.click(function(){
rate.removeClass("select hover");
$(this).addClass("select");
me.Index = $(this).index() + 1;
B.parents().children("#v_rate")[0].value = "" + me.Index;
alert(B.parents().children("#v_rate")[0].value);
})
}
</script>
<style type="text/css">
.p_rate{height:14px;position:relative;80px;overflow:hidden;display:inline-block;background:url(rate.png) repeat-x; }
.p_rate i{position:absolute;top:0;left:0;cursor:pointer;height:14px;16px;background:url(rate.png) repeat-x 0 -500px}
.p_rate .select{background-position:0 -32px}
.p_rate .hover{background-position:0 -16px}
.table_score{border:1px solid #DADADA; 500px; margin:40px 100px;}
.table_score td{border:1px solid #DADADA; 25%; text-align:center; }
</style>
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css">
<script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script>
</head>
<body screen_capture_injected="true">
<table id="table_score" class="table_score">
<tr>
<td></td>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>I</td>
<td>
<span class="p_rate" id="rate11">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
<td>
<span class="p_rate" id="rate12">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
<td>
<span class="p_rate" id="rate13">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
</tr>
<tr>
<td>II</td>
<td>
<span class="p_rate" id="rate21">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
<td>
<span class="p_rate" id="rate22">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
<td>
<span class="p_rate" id="rate23">
<i title="1分" style=" 16px; z-index: 5;" class=""></i>
<i title="2分" style=" 32px; z-index: 4;" class=""></i>
<i title="3分" style=" 48px; z-index: 3;" class=""></i>
<i title="4分" style=" 64px; z-index: 2;" class=""></i>
<i title="5分" style=" 80px; z-index: 1;" class=""></i>
</span>
<input id="v_rate" type="hidden">
</td>
</tr>
</table>
<script>
// getElementsByClassName not supportted in IE8 and previous vertion
var lis = document.getElementById('table_score').getElementsByTagName('span');
for(var i=0;i<lis.length;i++){
var Rate = new pRate(lis[i].id);
}
</script>
<input id="rate_result" type="hidden">
<div>
<object id="ClCache" click="sendMsg" host="" width="0" height="0"></object>
</div>
</body>
</html>