一、隔行變色html 表格

使用<thead>和<tbody>標籤拆分表頭和內容

<table border="1" width="500" height="50" align="center" id="tb1">
		<thead>
			<tr>
				<th>編號</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>張三</td>
				<td>22</td>
			</tr>
			<tr>
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr>
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr>
				<td>4</td>
				<td>趙六</td>
				<td>29</td>
			</tr>
			<tr>
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr>
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
 

一、js部分

window.onload = function() {
        var tb1 = document.getElementById("tb1");
        //獲取表格中tbody的行數
        var len = tb1.tBodies[0].rows.length;
        //對tbody裡面的行進行遍歷
        for(var i=0;i<len;i++){
        	if(i%2==0){
        		//對偶數行設定背景顏色
        		tb1.tBodies[0].rows[i].style.backgroundColor="pink";
        	}else{
        		//對奇數行設定背景顏色
        		tb1.tBodies[0].rows[i].style.backgroundColor="blue";
        	}
        }        
	}
 

二、高亮顯示html

<table border="1" width="500" height="50" align="center" id="tb1">
		<thead>
			<tr>
				<th>編號</th>
				<th>姓名</th>
				<th>年齡</th>
			</tr>
		</thead>
		<tbody>
			<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
				<td>1</td>
				<td>張三</td>
				<td>22</td>
			</tr>
			<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
				<td>2</td>
				<td>李四</td>
				<td>25</td>
			</tr>
			<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
				<td>3</td>
				<td>王五</td>
				<td>27</td>
			</tr>
			<tr onmouseover="changeColor('tr4','over')" id="tr4" onmouseout="changeColor('tr4','out')">
				<td>4</td>
				<td>趙六</td>
				<td>29</td>
			</tr>
			<tr onmouseover="changeColor('tr5','over')" id="tr5" onmouseout="changeColor('tr5','out')">
				<td>5</td>
				<td>田七</td>
				<td>30</td>
			</tr>
			<tr onmouseover="changeColor('tr6','over')" id="tr6" onmouseout="changeColor('tr6','out')">
				<td>6</td>
				<td>汾九</td>
				<td>20</td>
			</tr>
		</tbody>
	</table>
 

二、高亮顯示js部分

function changeColor(id,flag) {
		if(flag=='over'){
		document.getElementById(id).style.backgroundColor="red";			
		}else if(flag=='out'){
		document.getElementById(id).style.backgroundColor="";			
		}
	}