萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> parentElement,srcElement的使用小結

parentElement,srcElement的使用小結

 本篇文章主要是對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的區別   窗體要呈現立體感時,需要兩個邊框為亮色,剩下兩個邊框為暗色。bordercolorlight和bordercolordark分別代表亮色和暗色。   
copyright © 萬盛學電腦網 all rights reserved