js實現表格的選中一行
阿新 • • 發佈:2018-12-18
先設想下它的實現效果:
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一行了,則找到一行的物件了,對它的操作就回到最主要的那些開始了啊