实现该功能的大致算法,首先通过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>
由于是初学,因此会有许多的不足,还望各位多多指教,鄙人感激不尽!