隔行变色

最新推荐文章于 2021-06-17 09:55:44 发布

yzbczq

最新推荐文章于 2021-06-17 09:55:44 发布

阅读量74

点赞数

分类专栏： ajax 文章标签： Java

本文链接：https://blog.csdn.net/yzbczq/article/details/83406675

版权

ajax 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<html>
<head>
<script language="javascript">
function showtable(){
 var tableid='examineManage';  //表格的id
 var overcolor='#E8F5FE'; //鼠标经过颜色
 var color1='#FFFFFF';  //第一种颜色
 var color2='#F3FAFF';  //第二种颜色
 var tablename=document.getElementById(tableid);
 var tr=tablename.getElementsByTagName("tr");
for(var i=0 ;i<tr.length;i++){
	if(i%2!=0)
	{
		alert(i)
 		tr[i].style.background="#FFFFFF";
 	}
 	else
 	{
 		tr[i].style.background="#F3FAFF";
 	}
 }
 for(var i=0 ;i<tr.length;i++){
  tr[i].onmouseover=function(){
   this.style.backgroundColor=overcolor;
  }
  tr[i].onmouseout=function(){
   if(this.rowIndex%2!=0){
    this.style.backgroundColor=color1;
   }else{
    this.style.backgroundColor=color2;
   }
  }
 }

}
</script>
</head>
<body onload="showtable()" bgcolor="#fefefe">
	<table id="examineManage">
		<tbody>
		<tr><td>aaaaaaaaaaaaaaaaaa</td></tr>
		<tr><td>bbbbbbbbbbbbbbbbbbb</td></tr>
		<tr><td>ddddddddddddddddddd</td></tr>
		<tr><td>eeeeeeeeeeeeeeeeeeee</td></tr>
		<tr><td>ffffffffffffffffffff</td></tr>
		<tr><td>ssssssssssssssssssss</td></tr>
		<tr><td>wwwwwwwwwwwwwwwwwwww</td></tr>
		</tbody>
		<tr><td>qqqqqqqqqqqqqqqqqqqq</td></tr>
		<tr><td><input type="button" value="kkkkk" /></td></tr>
	</table>
</body>
</html>

yzbczq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
隔行变色

[code="java"]function showtable(){ var tableid='examineManage'; //表格的id var overcolor='#E8F5FE'; //鼠标经过颜色 var color1='#FFFFFF'; //第一种颜色 var color2='#F3FAFF'; //第二种颜色 var tablename=d...
复制链接

扫一扫

专栏目录