如何在TD标签中捕获鼠标右键并弹出一个菜单让用户来选择,大家请帮忙了,谢谢!

我想在一个表格的某一行的某一列单击鼠标右键时,能够弹出一个菜单,里面有好几个人名,可以让用户选择其中的一个来替换TD标签内的文字,要实现此目的,我有几个问题:
1、TD标签有click和dbclick事件,但如何才能捕获鼠标右键呢?
2、假如能捕获鼠标右键,如何能获得

1<td>...</td>

内的文字?
3、如何在单击鼠标右键的地方弹出一个菜单?
4、选择了菜单中的一个选项后,如何用选中的人名来替换

1<td>...</td>

中间的文字?
先谢谢各位了!请大家一定帮忙!!!!!!!!!!!!!
---------------------------------------------------------------

第一步:把下面代码放到

1<head></head>

中(这里可以修改菜单的样式)。

 1<style>   
 2<!--   
 3.skin0{   
 4position:absolute;   
 5width:200px;   
 6border:2px solid black;   
 7background-color:menu;   
 8font-family:Verdana;   
 9line-height:20px;   
10cursor:default;   
11visibility:hidden;   
12}   
13  
14.skin1{   
15cursor: default;   
16font: menutext;   
17position: absolute;   
18width: 165px;   
19background-color: menu;   
20border: 1 solid buttonface;   
21visibility:hidden;   
22border: 2 outset buttonhighlight;   
23}   
24  
25.menuitems{   
26padding-left:15px;   
27padding-right:10px;   
28}   
29\-->   
30</style>

第二步:下面代码放到:

1<body></body>

 1<script language="JavaScript1.2">   
 2//set the skin of the menu (0 or 1, with 1 rendering a default Windows menu like skin)   
 3var menuskin=1   
 4  
 5//set this variable to 1 if you wish the URLs of the highlighted menu to be displayed in the status bar   
 6var display_url=0   
 7  
 8  
 9function showmenuie5(){   
10//Find out how close the mouse is to the corner of the window   
11var rightedge=document.body.clientWidth-event.clientX   
12var bottomedge=document.body.clientHeight-event.clientY   
13  
14//if the horizontal distance isn't enough to accomodate the width of the context menu   
15if (rightedge<ie5menu.offsetWidth)   
16//move the horizontal position of the menu to the left by it's width   
17ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth   
18else   
19//position the horizontal position of the menu where the mouse was clicked   
20ie5menu.style.left=document.body.scrollLeft+event.clientX   
21  
22//same concept with the vertical position   
23if (bottomedge<ie5menu.offsetHeight)   
24ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight   
25else   
26ie5menu.style.top=document.body.scrollTop+event.clientY   
27  
28ie5menu.style.visibility="visible"   
29return false   
30}   
31  
32function hidemenuie5(){   
33ie5menu.style.visibility="hidden"   
34}   
35  
36function highlightie5(){   
37if (event.srcElement.className=="menuitems"){   
38event.srcElement.style.backgroundColor="highlight"   
39event.srcElement.style.color="white"   
40if (display_url==1)   
41window.status=event.srcElement.url   
42}   
43}   
44  
45function lowlightie5(){   
46if (event.srcElement.className=="menuitems"){   
47event.srcElement.style.backgroundColor=""   
48event.srcElement.style.color="black"   
49window.status=''   
50}   
51}   
52  
53function jumptoie5(){   
54if (event.srcElement.className=="menuitems"){   
55if (event.srcElement.getAttribute("target")!=null)   
56window.open(event.srcElement.url,event.srcElement.getAttribute("target"))   
57else   
58window.location=event.srcElement.url   
59}   
60}   
61</script>
 1<script language="JavaScript1.2">   
 2if (document.all&&window.print){   
 3if (menuskin==0)   
 4ie5menu.className="skin0"   
 5else   
 6ie5menu.className="skin1"   
 7document.oncontextmenu=showmenuie5   
 8document.body.onclick=hidemenuie5   
 9}   
10</script>

---------------------------------------------------------------

 1<script language="JavaScript">   
 2<!--   
 3function myContextMenu(){   
 4if(event.srcElement.tagName=="TD")   
 5{   
 6window.alert("您单击了右键");   
 7return false;   
 8}   
 9}   
10document.oncontextmenu=myContextMenu   
11//-->   
12</script>
1<table>
2<tr>
3<td>   
4请单击右键   
5</td>
6</tr>
7</table>
Published At
Categories with Web编程
comments powered by Disqus