克隆HTML表格行并显示DIV菜单

问题描述：

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

I have an HTML table with several rows. If you hover on the row then it displays a contextual menu which allows to add or delete the rows.

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

When you add the row I clone the existing row and add to the table. This works correctly! The problem is when I hover over the new row it shows the menu at the wrong position. The position is related to the row which I originally cloned! It even return the wrong top and left position which is associated with the original row which was cloned.

任何想法！

不确定这是否会有所帮助，但是下面是一些代码:

Not sure if this is going to help but here is little bit of code:

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();  

}

答

我尝试模拟您在做什么，对我来说效果很好..检查我的 JSBin演示

I tried to simulate what you are doing and it works fine for me.. Check my jsFiddle DEMO. Onclick on each row it clones that row and appends it to the bottom. JSBin DEMO

正如我在评论中提到的，在函数OnMouseOver(obj)中传递的obj不是正确的行.您的代码无法告诉我们此鼠标悬停功能在何处或如何绑定到悬停(mouseover和mouseout)事件.

As I mentioned in the comment, the obj that is being passed in your function OnMouseOver(obj) is not the correct row. You code doesn't tell us where or how this mouse over function is binded to hover(mouseover and mouseout) event.

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菜单

相关推荐