javascript - JQuery insertAfter();移动下一个表格单元格

Question

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

fiddle :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/