!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html head title JavaScript实现隔行变色的表格 / title style ! -- .datalist { border : 1px solid #007108 ; /* 表格边框 */ font-family :Arial; border-collapse :collapse; /* 边框重叠 */ background-color : #d9ffdc ; /* 表格背景色 */ font-size : 14px ;} .datalist th { border : 1px solid #007108 ; /* 行名称边框 */ background-color : #00a40c ; /* 行名称背景色 */ color : #FFFFFF ; /* 行名称颜色 */ font-weight :bold; padding-top : 4px ; padding-bottom : 4px ; padding-left : 12px ; padding-right : 12px ; text-align :center;} .datalist td { border : 1px solid #007108 ; /* 单元格边框 */ text-align :left; padding-top : 4px ; padding-bottom : 4px ; padding-left : 10px ; padding-right : 10px ;} .datalist tr .altrow { background-color : #a5e5aa ; /* 隔行变色 */ } -- / style script language = "javascript" window .onload = function ( ) { //隔行变色代码 var oTable = document .getElementById( "oTable" ); for ( var i= 0 ;ioTable.rows.length;i++){ if (i% 2 == 0 ) //偶数行时 oTable.rows[i].className = "altrow" ; }} / script / head body table class = "datalist" summary = "list of members in EE Studay" id = "oTable" tr th scope = "col" Name / th th scope = "col" Class / th th scope = "col" Birthday / th th scope = "col" Constellation / th th scope = "col" Mobile / th / tr tr td isaac / td td W13 / td td Jun 24th / td td Cancer / td td 1118159 / td / tr tr td fresheggs / td td W610 / td td Nov 5th / td td Scorpio / td td 1038818 / td / tr tr td girlwing / td td W210 / td td Sep 16th / td td Virgo / td td 1307994 / td / tr tr td tastestory / td td W15 / td td Nov 29th / td td Sagittarius / td td 1095245 / td / tr tr td lovehate / td td W47 / td td Sep 5th / td td Virgo / td td 6098017 / td / tr tr td slepox / td td W19 / td td Nov 18th / td td Scorpio / td td 0658635 / td / tr tr td smartlau / td td W19 / td td Dec 30th / td td Capricorn / td td 0006621 / td / tr tr td shenhuanyan / td td W25 / td td Jan 31th / td td Aquarius / td td 0621827 / td / tr tr td tuonene / td td W210 / td td Nov 26th / td td Sagittarius / td td 0091704 / td / tr tr td ArthurRivers / td td W91 / td td Feb 26th / td td Pisces / td td 0468357 / td / tr tr td reconzansp / td td W09 / td td Oct 13th / td td Libra / td td 3643041 / td / tr tr td linear / td td W86 / td td Aug 18th / td td Leo / td td 6398341 / td / tr tr td laopiao / td td W41 / td td May 17th / td td Taurus / td td 1254004 / td / tr tr td dovecho / td td W19 / td td Dec 9th / td td Sagittarius / td td 1892013 / td / tr tr td shanghen / td td W42 / td td May 24th / td td Gemini / td td 1544254 / td / tr tr td venessawj / td td W45 / td td Apr 1st / td td Aries / td td 1523753 / td / tr tr td lightyear / td td W311 / td td Mar 23th / td td Aries / td td 1002908 / td / tr / table / body / html
表格各行变色和高亮
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "zh-cn" head meta http-equiv = "Content-Type" content = "text/html;charset=UTF-8" / title 网页标题 / title meta name = "keywords" content = "关键字列表" / meta name = "description" content = "网页描述" / link rel = "stylesheet" type = "text/css" href = "" / style type = "text/css" / style script type = "text/javascript" //分析思路 //1.当页面加载完成后 实现表格的隔行变色 //2.给每一个行绑定一个onmouseover事件 实现高亮 //3.给每一个行绑定一个onmouseout事件 实现恢复原来的背景颜色 window .onload = function ( ) { //获取到表格对象 var table_obj = document .getElementsByTagName( "table" )[ 0 ]; //获取到当前的tbody var tbody_obj = table_obj.tBodies[ 0 ]; //获取到所有的行 var trs_obj = tbody_obj.rows; var trs_length = trs_obj.length; //实现隔行变色 for ( var i= 0 ;itrs_length;i++){ if (i% 2 == 0 ){ trs_obj[i].bgColor = "#f00" ; } else { trs_obj[i].bgColor = "#00f" ; } //需要给每一行绑定一个onmouseover事件 var bgcolor; trs_obj[i].onmouseover = function ( ) { bgcolor = this .bgColor; //在改变背景颜色之前将它保存起来 //要实现高亮 this .bgColor = "#ff0" ; //把背景颜色改变了 } //鼠标离开恢复原来的颜色 trs_obj[i].onmouseout = function ( ) { this .bgColor = bgcolor } }} / script / head body table border = "2" width = "300" thead td 学号 / td td 姓名 / td td 班级 / td / thead tbody tr td php007 / td td zhangsan / td td php / td / tr tr td php007 / td td zhangsan / td td php / td / tr tr td php007 / td td lisi / td td php / td / tr tr td php007 / td td zhangsan / td td php / td / tr tr td php007 / td td zhangsan / td td php / td / tr tr td php007 / td td zhangsan / td td php / td / tr tr td php007 / td td zhangsan / td td php / td / tr / tbody / table / body / html
