1.
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>
