个人中心
gpt4 book ai didi

jquery - 克隆 Html 表行并显示 DIV 菜单

转载 作者：行者123 更新时间：2023-12-01 08:18:04 24 4
gpt4 key购买 nike

我有一个包含多行的 HTML 表格。如果将鼠标悬停在该行上，则会显示一个上下文菜单，允许添加或删除行。

当您添加行时，我克隆现有行并添加到表中。这工作正常!问题是当我将鼠标悬停在新行上时，它会在错误的位置显示菜单。该位置与我最初克隆的行有关!它甚至返回与克隆的原始行相关的错误的顶部和左侧位置。

任何想法!

不确定这是否有帮助，但这里有一些代码:

function addOptionRow(rowToBeAdded,rowId) {

    var searchClass = "TBLCONTENTS";

    var rows = $("#" + rowId).parent().children("tr");
    var rowCount = rows.length;

    for(i=0;i<rows.length;i++) {

        if ($(rows[i]).attr('class') != searchClass && $(rows[i]).prev().attr('class') == searchClass) {

            rowToBeAdded.attr("id", getRandomString()); 
            $(rows[i]).before(rowToBeAdded.clone());
        }
    }
}

菜单显示代码如下:

function OnMouseOver(obj) { // obj is row which is passed in

    var top = 0;
    var left = 0;
    var id = "#" + obj.id;   

    currTemplateRow = obj.parentElement.parentElement;

    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menuToolsetTemplate").css(
            { position: "absolute",
                top: top + "px",
                left: left + "px"
            }
        ).show();  

}

最佳答案

您可能从错误的方向看待它。

  • HTML = 结构
  • JavaScript = 行为
  • CSS = 设计

不要越界!这严格来说是一个 CSS 问题。

您可能使用某种 JavaScript 来动态设置菜单的顶部和左侧值，但由于您克隆了该元素，菜单的旧位置仍然保留。

您应该做的是定位父级，即行，如下所示:

position: relative;

然后，任何 position:absolute 元素都将与最近定位的父元素相关。

然后您就可以为所有上下文菜单使用单一一致的样式。

<强> Here's a working example

完整代码:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script>
        $(function () {

            var $menu = $("<div class=menu>Menu</div>"),                //Create a single menu
                $td;
            $('table tr:nth-child(1) td:nth-child(1)').append($menu);   //Append it to the first by default, it won't appear until hovered.
            $('table tr').hover(function () {                           //When hovered...
                $td = $(this).find("td:nth-child(1)");                  //Find the first table cell in the row
                $('.menu').fadeOut(function () {                        //Fade out the existing menu, and when it ends...
                    $td.append($menu);                                  //Move it to the hovered row
                    $('.menu').fadeIn();                                //Fade it back in
                });

            }, function () { //When going out of hover
                $('.menu', this).fadeOut(); //Fade the menu out.
            });
        });
    </script>
    <style type="text/css">
        table {
            border-collapse: collapse;
        }

        table .menu {
            display:    none;
            position:   absolute;
            top:        2px;
            left:       2px;
            background: red;
        }

        table td:nth-child(1) {
            position: relative;
        }
    </style>
</head>
<body>

<table>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>blah</td>
        <td>blah</td>
    </tr>
</table>

</body>
</html>

请注意，我没有在此示例中包含行添加部分，因为这并不重要，只需将 .menu (或任何您所说的)元素附加到第一个 td，并看到我不需要重新计算它的位置(我没有在任何地方这样做)。因为它与定位的父级(也称为该行的第一个 TD)相关联，所以它是相对于该父级定位的。

更新:

  • 更新了代码，始终只创建一个元素，并在行之间传递。

关于jquery - 克隆 Html 表行并显示 DIV 菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9219050/

24 4 0
文章推荐： clojure - 在clojure中对一系列 bool 值进行分组？
文章推荐： python - Tensorflow的占位符初始化与tensorflow的常量初始化不同。为什么？
文章推荐： python - 访问全息 View 中的 Bokeh (图形)参数
文章推荐： php - 将 jQuery ajax 中的 json 数据作为新行插入到表中