Summary of parentElement srcElement

2020-03-30 01:19:32
OfStack


<!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> Headless 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>
<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>

This feels good enough to capture the object that the current event is acting on, such as event.srcelement.tagname, which captures the activity tagName.
Note that the tags are capitalized, such as "TD","TR","A", etc.

I even applied event.srcelement to rewrite a previous code, extending its functionality, a very simple piece of code.


<!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> Headless 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 (" : "+ (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>

The description of the bordercolordark and bordercolorlight in the above Table is as follows:
The difference between bordercolordark and bordercolorlight in HTML

When the form is to be solid, you need two bright borders and two dark borders. Bordercolorlight and bordercolordark represent bright and dark colors, respectively.