星级评定的实现

         实现该功能的大致算法,首先通过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>

由于是初学,因此会有许多的不足,还望各位多多指教,鄙人感激不尽!

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值