57.显示单元格的详细信息 parentNode 和 childNodes的理解

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6   <title></title>
 7 </head>
 8 <style type="text/css"> 
 9 .div_class{ 
10     margin: 0 auto; 
11     width: 200px; 
12     height: 17px; 
13     border: 1px solid #9EB1C0; 
14     padding: 1px;     
15 } 
16 </style>
17 <script type="text/javascript">
18 function displayDiv(obj){
19   var myName = obj.innerText;      //获取当前单元格内容
20   alert(obj.parentNode.nodeName);// TR
21   alert(obj.parentNode.childNodes);//
22 /*   
23  <tr>
24   <td>姓名</td>
25   <td>联系地址</td>
26   <td>电话</td>
27   </tr>
28     childNodes[0] = td
29     childNodes[1] = 姓名 #text
30     childNodes[2] = td
31     childNodes[3] = 联系地址 #text
32 
33 *
34 */
35   var address = obj.parentNode.childNodes[3].innerText;   //获取下一个单元格内容
36   var phone = obj.parentNode.childNodes[5].innerText;     //获取下下个单元格内容
37   var objDiv = document.getElementById("div");            //获取要显示内容的div
38   objDiv.innerHTML = "姓名：" +myName+ "<br>联系地址：" +address+ "<br>电话："+phone;
39   objDiv.style.display="";
40 }
41 
42 function hiddenDiv(){                                    //隐藏div的显示
43   var obgDiv = document.getElementById("div");   
44   obgDiv.style.display="none";
45 }
46 </script>
47 <body>
48 <table>
49   <tr>
50     <td>
51 
52 <table width="400" border="1" cellpadding="1" cellspacing="1">
53   <tr>
54     <td>姓名</td>
55     <td>联系地址</td>
56     <td>电话</td>
57   </tr>
58   <tr>
59     <td onclick="displayDiv(this)">张三</td>
60     <td>北京</td>
61     <td>010-88888888</td>
62   </tr>
63   <tr>
64     <td onclick="displayDiv(this)">王武</td>
65     <td>北京</td>
66     <td>010-66666666</td>
67   </tr>
68 </table>
69 <div id="div" class="div_class" style="display:none" ondblclick="hiddenDiv()"> 
70 </div>
71     </td>
72   </tr> 
73 </table>
74 </body>
75 </html>
posted on 2017-03-05 01:30 Sharpest 阅读(278) 评论(0) 收藏举报