1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
4 <title>Rainbow-lostyue</title>
5 <link rel="stylesheet" type="text/css" href="mydemo.css"/>
6 <script language="javaScript" type="text/javascript" src="jquery.js"></script>
7 <script language="javaScript" type="text/javascript" src="mydemo.js"></script>
8 <script type="text/javascript">
9 $(document).ready(function(){
10 $("table tr a").css("display", "none");
11
12 $("table tr a").click(function(event){
13 event.stopPropagation();
14 var aoffset = $(event.target).offset();
15 var aheight = $(event.target).height();
16
17 $("#popupmsg").css({top: aoffset.top + aheight + "px", left: aoffset.left + "px"});
18 $("#popupmsg #showlink").html($(this).html() + "para: " + aoffset.top + "px, " + aheight + "px");
19 $("#popupmsg").fadeTo("slow", 0.66);
20 });
21
22 $("table tr a").mouseout(function(event){
23 event.stopPropagation();
24 $("#popupmsg").fadeOut("slow");
25 });
26
27 $("table tr a").each(function(index){
28 //$($("table tr a")[index]).css("display", "none");
29 /*$($("table tr a")[index]).mouseover(function(){
30 $($("table tr a")[index]).css("display", "inline");
31 });
32
33 $($("table tr a")[index]).mouseout(function(){
34 $($("table tr a")[index]).css("display", "none");
35 });*/
36
37 $("table tr").each(function(){
38 //var eachtr = $($("table tr")[index]);
39 //alert($(eachtr a).innerHTML);
40 $(this).mouseover(function(){
41 $(this).find('a').css("display", "inline");
42 });
43
44 $(this).mouseout(function(){
45 $(this).find('a').css("display", "none");
46 });
47 }
48 );
49 });
50
51 $("#loginform1 > input").addClass("inputstyle");
52 $("#popupmsg").hide();
53 });
54
55 function test_everything(){
56 /*var trs = $("table tr");
57 trs.each(
58 function(){
59 //var eachtr = trs[i];
60 //alert($(this).find('a'));
61 $(this).find('a').addClass("tdstyle");
62 }
63 );*/
64 alert($("#popupmsg #showlink").html());
65 }
66 </script>
67 </head>
68 <body>
69 <h2><a href="relogin">Relogin</a></h2>
70 <form name="loginform" id="loginform1" action="login" method="post">
71 <input type="text" id="inputname">
72 <input type="text" name="inputage" id="inputage">
73 <input type="button" value="test" onclick="test_everything();">
74 </form>
75 <a href="javascript:void document.loginform.submit();">new window</a><br>
76 <a href="window.open();" onmouseover="status='Go to Site Map'; return true;">new window</a><br>
77 <a href="#" onclick="window.open();">new window</a>
78 <table id="mytable">
79 <tr>
80 <td>test1</td>
81 <td><a href="#">link34</a></td>
82 <td><a href="#">link5666</a></td>
83 </tr>
84 <tr>
85 <td>test2</td><td><a href="#">link2</a></td><td><a href="#">link</a></td>
86 </tr>
87 <tr>
88 <td>test3</td><td><a href="#">link3</a></td><td><a href="#">link</a></td>
89 </tr>
90 </table>
91
92 <table id="mytable">
93 <tr>
94 <td>test4</td><td><a href="#">link4</a></td><td><a href="#">link</a></td>
95 </tr>
96 <tr>
97 <td>test5</td><td><a href="#">link5</a></td><td><a href="#">link</a></td>
98 </tr>
99 <tr>
100 <td>test6</td><td><a href="#">link6</a></td><td><a href="#">link</a></td>
101 </tr>
102 </table>
103 <div id="popupmsg">
104 <span>display msg: <span id="showlink">111</span> </span>
105 </div>
106 </body>
107 </html>
1 .tdstyle {
2 background-color: green;
3 backgound: green;
4 }
5
6 .inputstyle {
7 border: 1px dotted black;
8 }
9
10 td{
11 width: 100px;
12 }
13
14 #popupmsg {
15 width: 150px;
16 height: 100px;
17 background-color:#FFCC66;
18 position: absolute;
19 }