javascript - 在所选 td 的底部中心显示 div

Question

我有一个有一些输入的表..

当用户在输入中按下回车键时，我想将 div 放在所选输入的下方(中心)。

例如:

这是我的 jsfiddle:

http://jsfiddle.net/alonshmiel/Ht6Ym/2371/

这是 html:

<table>
    <tr>
        <td><input type="text"></input></td>
        <td><input type="text"></input></td>
        <td>fshsfh</td>
        <td>347</td>
        <td><input type="text"></input></td>
    </tr>
</table>

<div id = "myDiv" class="callout bottom" style="position:absolute;display:none;">sgsf f shfs hfs hfsh </div>

Answer 1

给你: http://jsfiddle.net/kRHLH/3/

它并不完全位于每个中心。我现在正在努力调整它。但我认为这看起来不错。红色框从每个输入的开头开始。但我会努力把它放在中间。基本上必须获得输入的宽度并做更多的数学运算。

这只是 JavaScript，请参阅 fiddle 了解所有内容，因为我稍微更改了您的 CSS。

$('input').live('keypress', function (event) {
    if (event.which == '13') {
        d = document.getElementById('myDiv');
        d.style.display = "";
        elOffsetX = $(this).offset().left;
        elOffsetY = $(this).offset().top;
        d.style.left = elOffsetX+'px';
        d.style.top = elOffsetY+'px';
    }
});