首页 > 代码库 > js---隔行变色
js---隔行变色
隔行变色: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <script> //给指定的表格添加n行 function addRows(n) { //1 获取table标签 var tb = document.getElementById("tb"); //2 使用for循环添加n行的html for(var i=0;i<n;i++) { //3 将其设置为 table标签的innerHTML tb.innerHTML+="<tr><td> </td></tr>"; } } function change() { //1 获得所有的tr标签数组 var trs=document.getElementsByTagName("tr"); //2 通过for循环,修改偶数元素的样式,实现偶数行的灰色 for(var i=0;i<trs.length;i++) { if((i+1)%2==0) { //背景色 trs[i].style.backgroundColor = "gray"; //鼠标形状 trs[i].style.cursor = "pointer"; trs[i].id = i; //使用标签的id属性存储行号 //绑定匿名函数 trs[i].onclick = function() { //通过读取id属性获得行号 alert("这是第"+(parseInt(this.id)+1)+"行"); } trs[i].onmouseover = function() { this.style.backgroundColor ="blue"; } trs[i].onmouseout = function() { if((parseInt(this.id)+1)%2==0) this.style.backgroundColor ="gray"; else this.style.backgroundColor ="white"; } } } } </script> <body onl oad="addRows(20);change()"> <center> <table id="tb" border="1" cellspacing="1" cellpadding="1"> </table> </center> </body> </html> ========================================================================================== 隔行变色通过伪类demo: <!DOCTYPE html> <html> <style> .even { background-color:gray; cursor:pointer; } .highlight { background-color:blue } </style> <head> <meta charset="utf-8" /> <title></title> </head> <script> //给指定的表格添加n行 function addRows(n) { //1 获取table标签 var tb = document.getElementById("tb"); //2 使用for循环添加n行的html for(var i=0;i<n;i++) { //3 将其设置为 table标签的innerHTML tb.innerHTML+="<tr><td> </td></tr>"; } } function change() { //1 获得所有的tr标签数组 var trs=document.getElementsByTagName("tr"); //2 通过for循环,修改偶数元素的样式,实现偶数行的灰色 for(var i=0;i<trs.length;i++) { if((i+1)%2==0) { //1 添加even的伪类 //trs[i].setAttribute("class","even"); trs[i].className = "even"; //绑定匿名函数 trs[i].onclick = function() { //通过读取id属性获得行号 alert("这是第"+(parseInt(this.id)+1)+"行"); } trs[i].onmouseover = function() { this.className += " highlight"; } trs[i].onmouseout = function() { var pos = this.className.indexOf(" highlight"); //去除叠加的伪类 this.className = this.className.substring(0,pos); } } } } </script> <body onl oad="addRows(20);change()"> <center> <table id="tb" border="1" cellspacing="1" cellpadding="1"> </table> </center> </body> </html> ==============================================================================================
js---隔行变色
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。