最開始想更多的用js來動態操作表格，是因為在應用了easyUI之後，發現直接寫一個<table id="tt"></table>，這就夠了，介面裡面就剩下這麼一個標籤了，豁然乾淨了好多啊，當然要應用的還有好多知識，像json等，那個後期再說這裡先模仿生成下table的一些樣式吧。

前面記錄了動態的增加一行，insertRow（）和insertCell（）這麼兩個方法；然後又記錄了刪除一行或者一列的deleteRow（）和deleteCell（），記得哦，沒寫的話就是從上向下，從左到右哦，今天再來記錄下，選中表格的其中一行

先設想下它的實現效果：

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>
 

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一行了，則找到一行的物件了，對它的操作就回到最基本的那些開始了啊

今天提交了一個小資源，一直飛翔的鷹，不得不說，我找的幾張圖片太不搭配了，雖然有了飛翔的大體意思，但是整體的顯示太粗糙了，不過話糙理不糙吧就當，而且完成的時候我看著還挺開心的，哈哈.....