JavaScript当前tr行高亮效果
JavaScript当前tr行高亮效果属于前端实例代码,有关更多实例代码大家可以查看。
本章节分享一段代码实例,它实现了当前tr行高亮效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <script type="text/javascript"> function IniEvent() { var tbl = document.getElementById("tblMain"); var trs = tbl.getElementsByTagName("tr"); for (var index=0;index<trs.length;index++){ trs[index].onclick=TrOnClick; } } function TrOnClick(){ var tbl=document.getElementById("tblMain"); var trs=tbl.getElementsByTagName("tr"); for (var index=0;index<trs.length;index++){ if(trs[index]==this){ trs[index].style.background="yellow"; } else{ trs[index].style.background="white"; } } } window.onload=function(){ IniEvent(); } </script> </head> <body> <table id="tblMain" border="1"> <tr> <td>1</td> <td>前端教程网一</td> <td>css教程</td> </tr> <tr> <td>2</td> <td>前端教程网二</td> <td>div教程</td> </tr> <tr> <td>3</td> <td>前端教程网三</td> <td>jquery教程</td> </tr> <tr> <td>4</td> <td>前端教程网四</td> <td>pipipi.net</td> </tr> </table> </body> </html>
上面的代码实现了我们的要求,下面介绍一下它的实现过程。
一.代码注释:
(1).function IniEvent(){},此函数可以进行一些初始化工作。
(2).var tbl = document.getElementById("tblMain"),获取table表格对象。
(3).var trs = tbl.getElementsByTagName("tr"),获取tr元素集合。
(4).for (var index=0;index<trs.length;index++){
trs[index].onclick=TrOnClick;
},遍历每一个tr行,并且为它们注册onclick事件处理函数。
(5).function TrOnClick(){},事件处理函数。
(6).var tbl=document.getElementById("tblMain"),获取table元素对象。
(7).var trs=tbl.getElementsByTagName("tr"),获取tr元素对象集合。
(8).for (var index=0;index<trs.length;index++){
if(trs[index]==this){
trs[index].style.background="yellow";
}
else{
trs[index].style.background="white";
}
}遍历每一个行,将当前行背景颜色设置为黄色。
其他行的颜色设置白色。
二.相关阅读:
(1).getElementsByTagName()参阅document.getElementsByTagName()一章节。
(2).for循环参阅javascript for一章节。
JavaScript当前tr行高亮效果,这样的场景在实际项目中还是用的比较多的,关于JavaScript当前tr行高亮效果就介绍到这了。