js實現表格的選中一行-------Day58

最開始想很多其它的用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>

看出區別在哪了么，對就是在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一行了，則找到一行的對象了，對它的操作就回到最主要的那些開始了啊

今天提交了一個小資源，一直飛翔的鷹，不得不說，我找的幾張圖片太不搭配了，盡管有了飛翔的大體意思，可是總體的顯示太粗糙了，只是話糙理不糙吧就當，並且完畢的時候我看着還挺開心的，哈哈.....