parentElement,srcElement的使用小結(jié)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function ShowHide(obj){
var objin=obj.parentElement.parentElement.rows[1].style;
//var objin=obj.parentElement.parentElement.parentElement.rows[1].style;
objin.display=="none"?objin.display="block":objin.display="none";
}
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="cursor:pointer;" onclick="ShowHide(this)">Click Me!</td>
</tr>
<tr>
<td><table>
<tr>1111111111111111</tr>
<tr>2222222222222222</tr>
<tr>3333333333333333</tr>
<tr>4444444444444444</tr>
<tr>5555555555555555</tr>
</table></td>
</tr>
</tbody>
</table>
</BODY>
</HTML>
</body>
</html>
感覺這個挺好，可以捕獲當(dāng)前事件作用的對象，如event.srcElement.tagName可以捕獲活動標(biāo)記名稱。
注意獲取的標(biāo)記都以大寫表示，如"TD","TR","A"等。
偶應(yīng)用event.srcElement把以前的一個代碼重寫了下，擴(kuò)展了其功能，很簡單的一段代碼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/ecmascript">
function tdClick(){
if(event.srcElement.tagName.toLowerCase()=='td'){
alert("行:"+(event.srcElement.parentNode.rowIndex+1)+"列:"+(event.srcElement.cellIndex+1));
//alert("行:"+(event.srcElement.parentElement.rowIndex+1));
}
}
</script>
</head>
<body>
<table align="center" onclick="tdClick()" width="100%" height="400" cellspacing="1" border="1" bordercolor="#000000" bordercolorlight="#000000" bordercolordark="#C0C0C0" bgcolor="#C0C0C0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
對于以上Table中用bordercolordark和bordercolorlight的說明如下:
html 中bordercolordark和bordercolorlight的區(qū)別
窗體要呈現(xiàn)立體感時，需要兩個邊框?yàn)榱辽?，剩下兩個邊框?yàn)榘瞪ordercolorlight和bordercolordark分別代表亮色和暗色。
相關(guān)文章
JavaScript下比較常用的一些字符處理等函數(shù)，學(xué)習(xí)js的朋友經(jīng)常用得到。2011-03-03
這篇文章主要介紹了詳解JavaScript中的異常處理方法,包括基本的try...catch語句和throw語句的使用,需要的朋友可以參考下2015-06-06
nodeType屬性返回被選節(jié)點(diǎn)的節(jié)點(diǎn)類型介紹
這篇文章主要介紹了nodeType屬性返回被選節(jié)點(diǎn)的節(jié)點(diǎn)類型。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
fetch()是XMLHttpRequest的升級版,用于在JavaScript腳本里面發(fā)出 HTTP請求,本文章向大家介紹fetch()的用法,主要包括fetch()的用法使用實(shí)例、應(yīng)用技巧、基本知識點(diǎn)總結(jié)和需要注意事項(xiàng)，具有一定的參考價(jià)值，需要的朋友可以參考一下。2022-11-11
本篇是你必須知道的Javascript系列第二篇，我們主要來看看Javascript中變量作用域的問題,需要的朋友可以參考下2017-01-01
JavaScript對象創(chuàng)建及繼承原理實(shí)例解剖
本文將用實(shí)例講解一下JavaScript對象創(chuàng)建及繼承原理:JavaScript中的繼承是使用原型鏈的機(jī)制,對象創(chuàng)建使用Function構(gòu)造器，感興趣的朋友可以詳細(xì)了解下本文，或許可以幫助到你2013-02-02
這篇文章主要介紹了forward和redirect的區(qū)別,在前端開發(fā)中,有很多剛?cè)胄械呐笥巡涣私膺@兩者之間的區(qū)別,那么這篇文章可以帶給你新的認(rèn)知,需要的朋友可以參考下2023-03-03
下面小編就為大家?guī)硪黄狫avaScript基礎(chǔ)知識點(diǎn)歸納(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-09-09
javascript中經(jīng)常使用的對象判斷方式包括：typeof、constructor和Object.prototype.toString.call()2013-11-11
