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

时间：2022-07-19 06:52:28
<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>

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

DownLoad Demo File

相关文章