js操作表格目的隔行換色

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function()
		{
			var tables = document.getElementsByTagName("table");  //、此處不能用ID,CLASS替代!!!
			var odd, rows;
			for (var i = 0; i < tables.length; i++) 
			{
				odd = false;
				rows = tables[i].getElementsByTagName("tr");  //此處 注意
				for (var j = 0; j < rows.length; j++) 
				{
					if( odd == true)
					{
						rows[j].style.background = "cornflowerblue";
						odd = false;
					}
					else 
					{
						odd = true;
					}
				}
			}
			
			//
			var rowss = document.getElementsByTagName("tr");  //此處 注意
			
			for (var j = 0; j < rowss.length; j++) 
				{
					rowss[j].onmouseover = function()
					{
						this.style.fontWeight = "bold";
					}
					rowss[j].onmouseout = function()
					{
						this.style.fontWeight = "none";
					}
				}
		}
//		function bs ()
//		{
//				var tables = document.getElementsByTagName("table");
//				var rows;
//				rows = document.getElementsByTagName("tr");  //此處 注意
//				for (var j = 0; j < rows.length; j++) 
//				{
//					rows[j].onmouseover = function()
//					{
//						this.style.fontWeight = "bold";
//					}
//					rows[j].onmouseout = function()
//					{
//						this.style.fontWeight = "none";
//					}
//				}
//		}
</script>
	<style type="text/css">
		td{
			width: 200px;
		}
	</style>
</head>
<body>
	<table border="1" cellspacing="0" cellpadding="0">
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
		<tr>
			<th>Data</th><td>Data</td><td>Data</td><td>Data</td><td>Data</td><td>Data</td>
		</tr>
	</table>
</body>
</html>


發佈了2 篇原創文章 · 獲贊 2 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章