实现该功能的大致算法，首先通过ID获得指定的表格元素，然后再动态的获得其表格中含有多少td元素；获得总数以后，为每一个元素动态的设置一个onclick事件，当选中以后就改变该空间中的背景色；当然这只是实现了动态的添加onclick事件；在这里同时设置了一个特效，当鼠标放在上面的时候，显示成手装形态(td.style.cursor="pointer")！现在要实现的就是当点击某一个空间的时候，之前的背景色就变成红色、相反依旧保持白色！实现的算法：首先、获取选中的项；怎样实现获得选中的项？这又是一个问题！我是通过一个函数，获得所有的td数，同时获得选中的项(当然这里还不是索引),然后传递给另外一个函数进行判断操作；判断哪一项与选中项相同，那么就返回该项的索引值；否则就返回负一；在获得索引后，就将其之前的背景色进行更改操作；相反，不进行任何操作；实现的代码如下：
<html>
<head>
<title>评分控件的实现</title>
<script language="javascript" type="text/javascript">
function btnclick()
{
///算法：首先、定位到指定的元素；然后再取其中间的td元素，并且为td建立动态的onclick事件；
var tables=document.getElementById("tables");
var tds=tables.getElementsByTagName("td");///查找td的相关信息;
for(var i=0;i<tds.length;i++){
var td=tds[i];///获取选中的每一个;
/// 为其添加点击事件；
td.οnclick=clickstyle;
///在行里面设置鼠标的显示属性；
td.style.cursor="pointer";
}
}
function clickstyle()
{///因为上面的方法在调用该函数，所以可以用this进行操作;
//this.style.background="red";
///现在需要遍历其个数
var tables=document.getElementById("tables");
var tds=tables.getElementsByTagName("td");///获取td数;
var indexs=count(tds,this);///判断哪一个被选中了;
for(var i=0;i<=indexs;i++){ ///返回的是选中的序号；
///因此，前面的也要该背景色;
var td=tds[i];
td.style.background="red";
}
///相反，其后面的则变为白色;
for(var i=indexs+1;i<tds.length;i++){
var td=tds[i];
td.style.background="black";
}
}
function count(arr,elements)
{
for(var i=0;i<arr.length;i++){
if(arr[i]==elements){
return i;
}
}
return -1;
}
</script>
</head>
<body οnlοad="btnclick();">
<table border="0" id="tables">
<tr>
<td>一</td>
<td>二</td>
<td>三</td>
<td>四</td>
<td>五</td>
</tr>
</table>
<br>
<input type="button" value="点击测试下">
</body>
</html>
由于是初学，因此会有许多的不足，还望各位多多指教，鄙人感激不尽！
3522
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
