我想在一个表格的某一行的某一列单击鼠标右键时,能够弹出一个菜单,里面有好几个人名,可以让用户选择其中的一个来替换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>