This article is mainly on the use of Parentelement,srcelement a detailed introduction, the need for friends can come to the reference, I hope to help you.
Code as follows: <! 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> Untitled document </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& Gt <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> Feeling this is good, you can capture the active tag name by capturing the object that the current event acts on, such as Event.srcElement.tagName. Note that the tokens are obtained in uppercase, such as "TD", "TR", "A", and so on. I application event.srcelement to rewrite a previous code, extending its functionality, a simple piece of code. Code as follows: <! 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> Untitled document </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 ("line:" + ( event.srcelement.parentnode.rowindex+1) + "column:" + (event.srcelement.cellindex+1)); //alert ("line:" + (event.srcelement.parentelement.rowindex+1)); }} </script> </head> <body> <table align= "center" onclick= "Tdclick ()" Width= "1 00% "height=" cellspacing= "1" border= "1" bordercolor= "#000000" bordercolorlight= "#000000" bordercolordark= "# C0C0C0 "bgcolor=" #C0C0C0 "> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> &NB Sp <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> &NBSp <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> For the table above, the Bordercolordark and bordercolorlight descriptions are as follows: The difference between Bordercolordark and bordercolorlight in HTML form to render three-dimensional, Requires two borders to be bright, and the remaining two borders are dark. Bordercolorlight and Bordercolordark respectively represent bright and dark colors. Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
