隔行变色table

最新推荐文章于 2023-02-23 14:45:56 发布

netmail2012

最新推荐文章于 2023-02-23 14:45:56 发布

阅读量105

点赞数

分类专栏： js/jquery 文章标签：隔行变色table 好看的table 鼠标移上变色table

js/jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> hftable </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" type="text/css" href="table.css"> 
 </head>
 <style>
	.hftable th,td{
	font:11px Arial, Helvetica, sans-serif; line-height:20px;
	}
	.hftable{border-collapse:collapse;}
	.hftable th, td{text-align:left;padding:3px 2px;border:1px solid #dddddd;}
	.hftable th{background:#328aa4;color:#fff;}
	.hftable td{background:#e5f1f4;}

	.hftable td.nomarl{background:#e5f1f4;}
	.hftable td.empty{background:#fff;}
	.hftable td.over{background:#bce774;}
 </style>
 <script language="javascript">
   window.onload = function(){
		this.init = function(){
			var oTable = document.getElementById("hftable");
			oTable.className = "hftable";

			var trArr  = oTable.getElementsByTagName("tr");
			for(var i=1;i<trArr.length;i++){
				var tdArr = trArr[i].childNodes;

				for(var j=0;j<tdArr.length;j++){

					if(i%2==0) {tdArr[j].className = "empty"}
					else{tdArr[j].className = "nomarl"};

					tdArr[j].onmouseover = function(){
						over(this);	
					};
					tdArr[j].onmouseout = function(){
						out(oTable,i);
					};
				}
			}
		};
		this.over = function(obj){
			var td = obj.parentNode.childNodes;
			for(var i=0;i<td.length;i++){
				td[i].className = "over";
			}
		};

		this.out  = function(obj,rowNum){
			init();
		};
		init();
	};
 </script>

 <body>
		<table cellspacing="0" cellpadding="0" id="hftable" style="width:600px;">
			<tr>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
				<th>Title</th>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>	
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>			
		</table>
 </body>
</html>

netmail2012

关注

0
点赞
踩
0

收藏

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

[code="html"] hftable .hftable th,td{ font:11px Arial, Helvetica, sans-serif; line-height:20px; } .hftable{border-collapse:collapse;} .hftable th, td{t...
复制链接

扫一扫