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，以显示单元格右侧的信息框。

DEMO： 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.

JQuery insertAfter（）;移动下一个表格单元格

3 个答案: