先設想下它的實現效果：

1、原始樣式：

2、滑鼠滑過時：

3、滑鼠選中點選某一行

我們來記錄下它的詳細實現，儘管它看起來如此簡單。

1、先寫html語言，當然還是應用的前幾天相同的程式碼，可是多了一點點...

 <div id="testDiv" style="width: 60%;margin-left: 10%;margin-top: 50px;height: 1100px;background-color: #f2f2f2;padding: 60px 10px 10px 200px;">
	  	<table width="100%" height="100px" border="1px"  id="tad" onmouseover="getrow(this)" onmouseout="backrow(this)" onclick="selectRow(this)">
	  		<tr><td>1</td><td>1</td></tr>
	  		<tr><td>3</td><td>1</td></tr>
	  		<tr><td>5</td><td>1</td></tr>
	  	</table> 
	  	<input type="button" onclick="b()" value="add">
	  	<input type="button" onclick="c()" value="delRow">
	  	<input type="button" onclick="d()" value="delCol">
	  </div>

看出區別在哪了麼，對就是在table上多了onclick、onmouseover和onmouseout等事件，並且事件傳遞的引數時table物件本身

2、javascript實現對應的效果

function getrow(obj){
   if(event.srcElement.tagName=="TD"){
   curRow=event.srcElement.parentElement;
   curRow.style.background="yellow";
   }
}
function backrow(obj){
	if(event.srcElement.tagName=="TD"){
	curRow=event.srcElement.parentElement;
	curRow.style.background="#f2f2f2";
	}
}
function selectRow(obj){
	if(event.srcElement.tagName=="TD"){
	curRow=event.srcElement.parentElement;
	curRow.style.background="blue";
	alert("這是第"+(curRow.rowIndex+1)+"行");
	}
}

這裡的編碼有一個最關鍵點：

event.srcElement.tagName和event.srcElement.parentElement在這裡的應用；

event是觸發時間的源物件，而srcElement則就是選中物件，而parentElement則是選中物件的父層物件；以當前的樣例來簡單解釋的話，就是說，滑鼠放上table，從而激活了時間getrow（this），當滑鼠放在任一單元格之上時，它的srcElement都是 td，並且它的parentElement也就是tr一行了，則找到一行的物件了，對它的操作就回到最主要的那些開始了啊