jQuery insertAfter();移动下一个表格单元格

Question

我有一个表格设置，当我将鼠标悬停在表格单元格上时，我希望在单元格旁边显示一个信息框，我使用的是 Jquery insertAfter();为此，但问题是移动了他不应该做的下一个单元格，因为我的信息框是绝对位置。

小提琴：Link

HTML

<table cellspacing="0" cellpadding="0">
<tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
</tr>
<tr>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
    <td>test</td>
</tr>

CSS

table {
    width: 100%;
}

table tr td {
    padding: 3px;
    border: 1px solid #000;
}

div#hover_info_box {
    border: 1px solid #000;
    padding: 10px;
    position: absolute;
    background-color: transparent;
    z-index: 20;
    display: none;
}

Javascript/Jquery

$("table tr td").mouseover(function(){
    $('#hover_info_box').show().html("<p>content</p>").insertAfter(this);
});

$("table tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

Answer 1

insertAfter 会破坏你的标记，因为<div> 不能直接插入到<td> 标记之后。

您可以改用 appendTo 并修复您的 CSS 以在单元格右侧显示信息框。

演示： http://jsfiddle.net/c9DKZ/4/

Answer 2

看看这个adjusted fiddle

即，将您的 jQuery 更改为：

$("table tr td").mouseover(function(){
    var td=$(this);
    $('#hover_info_box').show().html("<p>content</p>").css({left:td.position().left + td.outerWidth()+'px', top:td.position().top});
});

$("table tbody tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

通过使用 insertAfter 你打破了文档的流动（导致无效的 HTML 和你注意到的视觉效果一样多），你需要做的就是正确设置信息框相对于当前单元格的位置悬停在上面。

Answer 3

试试：

$("table tr td").mouseover(function(){
    $('#hover_info_box').show().html("<p>content</p>").appendTo($(this).next());
});

$("table tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

Updated fiddle here.