微客导航 » 文章资讯 » JS实现的表格行鼠标点击高亮效果代码

JS实现的表格行鼠标点击高亮效果代码

2024-03-25 07:27:02 362

本文实例讲述了JS实现的表格行鼠标点击高亮效果代码。分享给大家供大家参考，具体如下：

偶尔在看天天基金网净值公告时，从源代码里剥下的一段js代码，感觉比较实用，分享一下(仅IE有效)

<scripttype="text/javascript">
varhighlightcolor='#E0F2FE';
varclickcolor='#ffedd2';
functionMouseOver(){
varsource=event.srcElement;
if(source.tagName=="TD"){
source=source.parentElement;
varcells=source.children;
if(cells[0].style.backgroundColor!=highlightcolor&&cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor=highlightcolor;
}
}
}
functionMouseOut(){
varsource=event.srcElement;
if(source.tagName=="TD"){
source=source.parentElement;
varcells=source.children;
if(cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++){
cells[i].style.backgroundColor="";
}
}
}
functionMouseClick(){
varsource=event.srcElement;
if(source.tagName=="TD"){
source=source.parentElement;
varcells=source.children;
if(cells[0].style.backgroundColor!=clickcolor)
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor=clickcolor;
else
for(i=0;i<cells.length;i++)
cells[i].style.backgroundColor="";
}
}
</script>
<tableonmouseover="MouseOver()"onclick="MouseClick()"onmouseout="MouseOut()"cellspacing="0"bordercolordark="#ffffff"bordercolorlight="#cccccc"border="1"width="80%"align="center"style="cursor:pointer">
<tr>
<td>1</td>
<td>a</td>
<td>b</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>d</td>
</tr>
<tr>
<td>3</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>4</td>
<td>g</td>
<td>h</td>
</tr>
</table>

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JS实现的表格行鼠标点击高亮效果代码

热门推荐

随机推荐