一、1.1隔行變色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>
 

1.2js部分

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";
        	}
        }        
	}
 

1.3JQuery部分 

<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			//1.頁面載入
			$(function(){
				/*//2.獲取tbody下面的偶數行並設定背景顏色
				$("tbody tr:even").css("background-color","yellow");
				//3.獲取tbody下面的奇數行並設定背景顏色
				$("tbody tr:odd").css("background-color","green");*/
				
				//2.獲取tbody下面的偶數行並設定背景顏色
				$("tbody tr:even").addClass("even");
				//$("tbody tr:even").removeClass("even");
				//3.獲取tbody下面的奇數行並設定背景顏色
				$("tbody tr:odd").addClass("odd");
			});
		</script>
 

二、2.1高亮顯示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>

2.2高亮顯示js部分

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

2.3高亮顯示JQuery部分 

function changeColor(id,flag) {
				if(flag=='over'){
				    $("#"+id).css("background-color","red");			
				}else if(flag=='out'){
					$("#"+id).css("background-color","");;			
				}
			}