Question

我有一个包含多行的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();  

}

Answer 1

你可能从错误的方向看它。

HTML =结构
JavaScript =行为
CSS = Design

不要越线！这完全是CSS问题。

您可能有某种JavaScript动态设置菜单的顶部和左侧值，但是自从克隆该元素后，菜单的旧位置仍然存在。

你应该做什么，定位父，a.k.a。行，如下所示：

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，并且看到我不需要重新计算它的位置（我不是在任何地方都这样做）。因为它与定位的父级（a.k.a.，该行的第一个TD）相关联，所以它相对于该父级定位。

更新

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

Answer 2

我试图模拟你在做什么，它对我来说很好..检查我的jsFiddle DEMO。在每行上单击它克隆该行并将其附加到底部。 JSBin DEMO

正如我在评论中提到的，函数OnMouseOver(obj)中传递的obj不是正确的行。您的代码并没有告诉我们鼠标悬停（mouseover和mouseout）事件绑定到鼠标的位置和方式。

<强> JS：

var index = 0;
$('#mytable tr').on ('click', function () {
    var $this_cloned = $(this).clone();
    $this_cloned.attr('id', this.id + (index++));
    $('#mytable tr:last').after($this_cloned);  
});

$('#mytable').on ('mouseenter', 'tr', function () {
    var top = 0;
    var left = 0;
    var id = "#" + this.id;   

    //currTemplateRow = obj.parentElement.parentElement;
    var pos = $(id).position();
    top = pos.top - 5;
    left = pos.left - 5;

    $("#menu").text ('Menu for ' + this.id);

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

$('#mytable').on ('mouseleave', 'tr', function () {
    $("#menu").hide();
});

HTML

<table id="mytable" cellpadding="0" border="1px" >
    <tr id="row1" >
        <td>Row 1</td>
        <td>Row 1</td>
        <td>Row 1</td>
    </tr>
    <tr id="row2" >
        <td>Row 2</td>
        <td>Row 2</td>
        <td>Row 2</td>
    </tr>   
    <tr id="row3" >
        <td>Row 3</td>
        <td>Row 3</td>
        <td>Row 3</td>
    </tr>
</table>
<div id="menu">Menu</div>

克隆Html表行并显示DIV菜单

2 个答案:

完整代码：

更新