parentElement,srcElement的使用小結
<!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>無標題文檔</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>
感覺這個挺好,可以捕獲當前事件作用的對象,如event.srcElement.tagName可以捕獲活動標記名稱。
注意獲取的標記都以大寫表示,如"TD","TR","A"等。
偶應用event.srcElement把以前的一個代碼重寫了下,擴展了其功能,很簡單的一段代碼。
<!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>無標題文檔</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)立體感時,需要兩個邊框為亮色,剩下兩個邊框為暗色。bordercolorlight和bordercolordark分別代表亮色和暗色。
相關文章
在JavaScript中處理時間之getHours()方法的使用
這篇文章主要介紹了在JavaScript中處理時間之getHours()方法的使用,是JS入門學些中的基礎知識,需要的朋友可以參考下2015-06-06JavaScript數(shù)據(jù)結構和算法之二叉樹詳解
這篇文章主要介紹了JavaScript數(shù)據(jù)結構和算法之二叉樹詳解,本文講解了二叉樹的概念、二叉樹的特點、二叉樹節(jié)點的定義、查找最大和最小值等內(nèi)容,需要的朋友可以參考下2015-02-02JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三個函數(shù)的理解
以前一直會三個函數(shù)的使用產(chǎn)生混淆,現(xiàn)在通過對三個函數(shù)的原型定義的理解,其實很容易記住三個函數(shù)。2010-04-04JavaScript onclick 和 click 的區(qū)別詳解
onclick是綁定事件,click本身是方法作用是觸發(fā)onclick事件,只要執(zhí)行了元素的click()方法,本片文章講的很詳細,大家可以看看,希望能夠給你帶來幫助2021-10-10