本文介绍了一种使用JavaScript实现的表格点击高亮效果的方法。当用户点击表格中的某个单元格时，该单元格及其之前的所有单元格将被高亮显示为红色，而之后的单元格则保持白色背景。此功能通过获取元素索引并遍历表格元素来实现。
<script type="text/javascript">
function indexOf(arr,element){
for(var i=0;i<arr.length;i++){
if(arr[i]==element){
return i
}
}
return -1;
}
function initEvent(){
var table1 = document.getElementById("tableId");
var tds = table1.getElementsByTagName("td");
for(var i=0;i<tds.length;i++){
tds[i].onclick=tdOnclick;
tds[i].style.cursor="pointer";
}
}
function tdOnclick(){
var table1=document.getElementById("tableId");
var tds = table1.getElementsByTagName("td");
var index = indexOf(tds,this);//this表示点击的当前td是哪个
for(var i=0;i<=index;i++){
var td = tds[i];
td.style.background="red";
}
for(var i=index+1;i<tds.length;i++){
var td = tds[i];
td.style.background ="white";
}
}
</script>
<body onload="initEvent()">
<table id="tableId">
<tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td> </tr>
</table>
</body>
<!--EndFragment-->
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
