<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>右键显示菜单</title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style>
.table{width:100%;}
.table,.table tr th, .table tr td {border:1px solid #0094ff; padding:5px 10px;}
.table {border-collapse: collapse;}
.menu{
background:#F8F8F8;
position: absolute;
display: none;
border:1px solid lightgray;
border-radius:3px;
box-shadow: 2px 2px 5px #e0e0e0;
z-index:9999;
}
.menu .menu-item{padding:10px 15px;}
.menu .menu-item:not(:last-child){border-bottom:1px solid lightgray;}
.menu .menu-item:hover{cursor:pointer;background:lightgray;}
.td-sel{
background:#3AB2FF;
}
</style>
<script>
$(document).ready(function(){
$('.td').bind("contextmenu",function(ev){
ev.preventDefault();
var widthMiss=$('#menu').width()+ev.clientX>$('body').width()?$('#menu').width():0;
var menu=document.getElementById("menu");
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
menu.style.display="block";
menu.style.left=(ev.clientX-widthMiss)+"px";
menu.style.top=ev.clientY+scrollTop+"px";
$('.td').removeClass('td-sel');
$(this).addClass('td-sel');
});
$(document).bind("click",function(ev){
ev.preventDefault();
$('#menu').hide();
$('.td').removeClass('td-sel');
});
});
</script>
</head>
<body>
<table class="table">
<tr>
<td class="td">数据1</td><td class="td">数据2</td><td class="td">数据3</td>
</tr>
<tr>
<td class="td">数据11</td><td class="td">数据22</td><td class="td">数据33</td>
</tr>
</table>
<div id="menu" class="menu">
<div class="menu-item">这是子菜单1</div>
<div class="menu-item">这是子菜单2</div>
<div class="menu-item">这是子菜单3</div>
<div class="menu-item">这是子菜单4</div>
</div>
</body>
</html>
