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

JQuery insertAfter(); move the next table cell

本文关键字：下一个 表格 单元格 移动 insertAfter JQuery      更新时间：2023-09-26

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

Fiddle：链接

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

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

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

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

看看这个调整过的小提琴

也就是说，将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();
});

通过使用insert在中断文档流（导致无效的HTML和您注意到的视觉效果一样多）后，您所需要做的就是正确设置信息框相对于当前悬停单元格的位置。

尝试：

$("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();
});

此处更新了fiddle

相关文章：