鼠标右键Table的td弹出多级菜单,双击td编辑
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
html, body {
TEXT-ALIGN: center;
height: 100%;
overflow: hidden;
} body, div, ul, li {
margin: 0;
padding: 0;
} body {
font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
} ul {
list-style-type: none;
} #menuDiv {
position: absolute;
top: -9999px;
left: -9999px;
} #menuDiv ul {
float: left;
border: 1px solid #979797;
background: url(img/line.png) 24px 0 repeat-y #f1f1f1;
padding: 2px;
box-shadow: 2px 2px 2px rgba(0,0,0,.6);
} #menuDiv ul li {
float: left;
clear: both;
height: 24px;
cursor: pointer;
line-height: 24px;
white-space: nowrap;
padding: 0 30px;
} #menuDiv ul li.sub {
background-repeat: no-repeat;
background-position: right 7px;
background-image: url(img/arrow.png);
} #menuDiv ul li.active {
background-color: #f1f3f6;
border-radius: 3px;
border: 1px solid #aecff7;
height: 22px;
line-height: 22px;
background-position: right -9px;
padding: 0 30px;
} #menuDiv ul ul {
display: none;
position: absolute;
}
</style>
</head>
<body>
<script src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var getOffset = {
top: function (obj) {
return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
},
left: function (obj) {
return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0)
}
};
var tdName;
var tdHtml;
window.onload = function () {
var oMenu = document.getElementById("menuDiv");
var aUl = oMenu.getElementsByTagName("ul");
var aLi = oMenu.getElementsByTagName("li");
var showTimer = hideTimer = null;
var i = 0;
var maxWidth = maxHeight = 0;
var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight];
oMenu.style.display = "none";
for (i = 0; i < aLi.length; i++) {
//为含有子菜单的li加上箭头
aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub");
//鼠标移入
aLi[i].onmouseover = function () {
var oThis = this;
var oUl = oThis.getElementsByTagName("ul");
//鼠标移入样式
oThis.className += " active";
//显示子菜单
if (oUl[0]) {
clearTimeout(hideTimer);
showTimer = setTimeout(function () {
for (i = 0; i < oThis.parentNode.children.length; i++) {
oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
}
oUl[0].style.display = "block";
oUl[0].style.top = oThis.offsetTop + "px";
oUl[0].style.left = oThis.offsetWidth + "px";
setWidth(oUl[0]);
//最大显示范围
maxWidth = aDoc[0] - oUl[0].offsetWidth;
maxHeight = aDoc[1] - oUl[0].offsetHeight;
//防止溢出
maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px");
maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px")
}, 300);
}
};
//鼠标移出 aLi[i].onmouseout = function () {
var oThis = this;
var oUl = oThis.getElementsByTagName("ul");
//鼠标移出样式
oThis.className = oThis.className.replace(/\s?active/, "");
clearTimeout(showTimer);
hideTimer = setTimeout(function () {
for (i = 0; i < oThis.parentNode.children.length; i++) {
oThis.parentNode.children[i].getElementsByTagName("ul")[0] &&
(oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none");
}
}, 300);
};
}
//自定义右键菜单
document.getElementById("menuMain").oncontextmenu = function (event) {
var event = event || window.event;
oMenu.style.display = "block";
oMenu.style.top = event.clientY + "px";
oMenu.style.left = event.clientX + "px";
setWidth(aUl[0]);
//最大显示范围
maxWidth = aDoc[0] - oMenu.offsetWidth;
maxHeight = aDoc[1] - oMenu.offsetHeight;
//防止菜单溢出
oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px");
oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px");
return false;
}; //取li中最大的宽度, 并赋给同级所有li
function setWidth(obj) {
maxWidth = 0;
for (i = 0; i < obj.children.length; i++) {
var oLi = obj.children[i];
var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi, null)["paddingLeft"]) * 2
if (iWidth > maxWidth) maxWidth = iWidth;
}
for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px";
} //单击该单元格取得该Td值
var td = $("#menuMain").find("td");
td.each(function (i) {
td[i].onmousedown = function () {
//event.button == //1为左键，2为右键，4为中键,0为没有按键动作，3为屏蔽右键
oMenu.style.display = "none"
if (event.button == 2) {
event.returnValue = false;
tdName = $(this).html();
$(this).attr("real-value", tdName);
tdHtml = $(this);
}
};
}); //双击td改变值
$("#menuMain").find("td").dblclick(function () {
var objHtml= $(this);
var oldText = $.trim(objHtml.html());
var input = $("<input type='text' id='txtId' value='" + oldText + "'>");
$(this).html(input);
//var ctr = document.getElementById("txtId").createTextRange();
//ctr.collapse(false);//将插入点移动到当前范围的开始或结尾。
//ctr.select(); //编辑td屏蔽右键菜单
input.contextmenu(function () {
return false;
});
input.trigger("focus").trigger("select"); //失去焦点时
input.blur(function () {
var newText = $(this).val();
var input_blur = $(this);
//if (oldText != newText) {
//}
objHtml.html(newText);
}); //判断键盘的某健相对应的事件
input.keydown(function (event) {
var keyValue = event.keyCode;
var input_keydown = $(this); switch (keyValue) {
case 13: // 按下回车键
var newValue = input_keydown.val();
objHtml.html(newValue);
break;
case 27: // 按下Esc键
objHtml.html(oldText);
break;
}
}); });
}; //右击选择该单元格
function rightClickCell(itemValue) {
tdName = itemValue + "，" + tdName;
$(tdHtml).html(tdName);
selectArow(tdHtml);
} //右击选择该列为
function rightClickColumns(itemValue) {
var thisTdIndex = $(tdHtml).index();
var thisTrIndex = $(tdHtml).parent().index();
$("#menuMain").find("tr").each(function () {
var allTrIndex = $(this).index();
if (allTrIndex >= thisTrIndex) {
var tdObj = $(this).find("td").eq(thisTdIndex);
var thisTdHtml = $(this).find("td").eq(thisTdIndex).html();
thisTdHtml = itemValue + "，" + thisTdHtml;
tdObj.html(thisTdHtml);
selectArow(tdObj);
}
}); } //原来的节点，假设原来的背景颜色为白色，点击变为#e6f0fc
function selectArow(sObject) {
var pre;
$(sObject).attr("style", "BACKGROUND-COLOR: #e6f0fc");
if (pre != null && pre != sObject) $(pre).attr("style", "BACKGROUND-COLOR: white");
pre = sObject;
} </script> <form id="menuForm">
<input type="hidden" id="tableId" value="" />
<table border="1" id="menuMain">
<tr>
<td real-value="">AAAA</td>
<td real-value="">BBBB</td>
<td real-value="">CCCC</td>
<td>DDDD</td>
</tr>
<tr>
<td>EEEE</td>
<td>FFFF</td>
<td>GGGG</td>
<td>HHHH</td>
</tr>
<tr>
<td>IIII</td>
<td>JJJJ</td>
<td>KKKK</td>
<td>LLLL</td>
</tr>
<tr>
<td>MMMM</td>
<td>NNNN</td>
<td>OOOO</td>
<td>PPPP</td>
</tr>
</table>
</form>
<div id="menuDiv">
<input type="hidden" id="idObj" value="" />
<ul>
<li>该单元格为
<ul>
<li onclick="rightClickCell('起运港')">起运港</li>
<li onclick="rightClickCell('目的港')">目的港</li>
<li onclick="rightClickCell('船公司')">船公司</li>
<li onclick="rightClickCell('起始日期')">起始日期</li>
</ul>
</li>
<li>该列为
<ul>
<li onclick="rightClickColumns('起运港')">起运港</li>
<li onclick="rightClickColumns('目的港')">目的港</li>
<li>运价
<ul>
<li>---</li>
<li>---</li>
<li>---</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body> </html>
鼠标右键Table的td弹出多级菜单,双击td编辑的更多相关文章
- Android之弹出多级菜单
使用布局文件创建菜单:(多级菜单) 在res下创建目录menu(假设已经有啦就不用再创建了) 在该menu目录下创建XML文件这里我把文件名称命名为menu 在创建的menu.XML文件里 写入: & ...
- WPF 之 左键弹出操作菜单，并禁用右键菜单
在目前的WPF版本中,很多的控件都有一个ContextMenu的属性,可以设置组件的右键菜单,这点确实是很方便,但是有些时候我们可能会需要当单击鼠标左键才弹出这个ContextMenu,而不是单击鼠标 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- EditorGUILayout.EnumPopup 枚举弹出选择菜单
http://www.unity蛮牛.com/thread-25490-1-1.html http://www.unity蛮牛.com/m/Script/EditorGUILayout.EnumPop ...
- 转：jQuery弹出二级菜单
<html> <head> <meta http-equiv="content-type" content="text/html; char ...
- WPF：设置弹出子菜单的是否可用状态及效果
需求: 设置弹出子菜单(二级)项仅首项可用,其他项均不可用:不可用是呈灰色效果. 注: 菜单项都是依据层级数据模板.具体格式如下: StackBlock{TextBlock{Image}.TextBl ...
- ListView的使用（二）长按弹出上下文菜单
public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- Flutter - 弹出底部菜单Show Modal Bottom Sheet
在很多安卓App上,有很多底部弹出的菜单,这个在Flutter上同样可以实现. 先看一下效果 嗯,就是这样子的,当用户点击菜单区域以外的时候,菜单会自动关闭. 下面就看一下Dart语言实现 float ...
随机推荐
- 数据分析---用pandas进行数据清洗（Data Analysis Pandas Data Munging/Wrangling）
这里利用ben的项目(https://github.com/ben519/DataWrangling/blob/master/Python/README.md),在此基础上增添了一些内容,来演示数据清 ...
- 【XSY2759】coin DP 线性插值
题目描述 有\(n\)种面值不同的硬币,每种有无限个,且任意两个\((x,y)\)要么\(x\)是\(y\)的倍数,要么\(y\)是\(x\)的倍数. 你要取\(m\)元钱,问你有多少种不同的取法. ...
- 【XSY2729】欧拉子图 无向图连通性 数学
题目大意 给你一个\(n\)个点\(m\)条边的无向图(可能有重边),对于这个图的边集的子集(一共有\(2^m\)个),如果其导出的子图的每个联通块内都存在欧拉回路,我们就把答案加上这个子图的边数的平 ...
- PHP获取网络图片并保存在本地目录
PHP获取网络图片并保存在本地目录思路: 代码如下: function file_exists_S3($url) { $state = @file_get_contents($url,0,null,0 ...
- 【cf842C】 Ilya And The Tree（dfs、枚举因子）
C. Ilya And The Tree 题意 给一棵树求每个点到根的路上允许修改一个为0,gcd的最大值. 题解 g是从根到当前点允许修改的最大gcd,gs为不修改的最大gcd.枚举当前点的因子,更 ...
- 【Luogu3732】[HAOI2017]供给侧改革（Trie树）
[Luogu3732][HAOI2017]供给侧改革(Trie树) 题面 洛谷 给定一个纯随机的\(01\)串,每次询问\([L,R]\)之间所有后缀两两之间的\(LCP\)的最大值. 题解 一个暴力 ...
- 【BZOJ5314】[JSOI2018]潜入行动（动态规划）
[BZOJ5314][JSOI2018]潜入行动(动态规划) 题面 BZOJ 洛谷 题解 不难想到一个沙雕\(dp\),设\(f[i][j][0/1][0/1]\)表示当前点\(i\),子树中一共放了 ...
- Nmap扫描常用参数
TCP: nmap -sC -sS -sV -p 1-65535 -A -v -v -oX filename.xml -Pn ip 类似: nmap -sS -A -sV -vv -sC -PN -p ...
- push的时候报错：Permission denied (publickey)
最近,在push的时候遇到一个问题,简单描述下过程(git客户端命令行操作) 我先在本地建了一个文件夹,mkdir dubbodemo 然后进入到这个文件夹,cd dubbodemo 添加我的内容 初 ...
- TJOI2011书架(dp)
当农夫约翰闲的没事干的时候,他喜欢坐下来看书.多年过去,他已经收集了 N 本书 (1 <= N <= 100,000), 他想造一个新的书架来装所有书. 每本书 i 都有宽度 W(i) 和 ...