JQuery insertAfter(); переместить следующую ячейку таблицы

Question

У меня есть настройка таблицы, и когда я наводил указатель мыши на ячейку таблицы, я хочу, чтобы рядом с ячейкой отображалось информационное поле, im используя 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

Посмотрите на этот 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 2

insertAfter разрывает вашу разметку, так как <div> не может быть вставлен после тега <td> напрямую.

Вместо этого вы можете использовать appendTo и исправить свой CSS, чтобы отобразить информационное окно в правой части ячейки.

DEMO:http://jsfiddle.net/c9DKZ/4/

Answer 3

Try:

$("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.