我有一个包含多行的 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 元素都将与最近定位的父元素相关。
然后您就可以为所有上下文菜单使用单一一致的样式。
完整代码:
<!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/