在所选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，因为我改变了你的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';
    }
});

Answer 2

以下是JSFiddle

$("#myDiv").css("left",$(this).offset().left);

在您从div中删除display：none的行之后添加此代码。

此代码不会将div置于输入中心，而是放在左侧。为了使它居中，你需要首先确定两者的宽度（div和输入），然后在'.left'之后添加它。

Answer 3

根据另一个元素居中元素

1. 获取您想要居中的元素的宽度和左侧值
2. 然后获取要居中的元素的宽度
3. 然后是两个宽度的一半
4. 减去以中心元素半宽度为中心的元素半宽
5. 将此新值添加到元素
中心的左侧

所以：

$('input').on("keypress",function(e){
    if(e.which=="13"){
      //Gets the bounding rectangle of the element, gives left,top,right,bottom,width,height
      var rect = this.getBoundingClientRect();
      var l = rect.left;
      var b = rect.bottom;
      var iw = rect.width;
      var dw = $("#myDiv").outerWidth();
      $("#myDiv").css("left",(l+((iw/2)-(dw/2)))+"px");
      $("#myDiv").css("top",b+"px");
      $("#myDiv").show();
    }
});

JSFiddle Demo