鼠标右键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>该列为&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <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>
DownLoad Demo File
posted @ 2013-09-10 13:36 为乐而来阅读(584) 评论(0) 编辑收藏举报
刷新页面返回顶部
为乐而来

我们不生产代码，我们只是搜索引擎的搬运工,纯天然的弱咸性代码,让你运用自如。

鼠标右键Table的td弹出多级菜单,双击td编辑

公告
