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

我有一张有一些输入的表格

当用户在输入中按enter键时，我想将div放在所选输入的下方（中间）

例如：

这是我的JSFIDLE：

这是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>

fshsfh
347
sgsf f shfs hfs hfsh

给你：

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

这只是JavaScript，请参阅fiddle for everything，因为我稍微修改了您的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';
    }
});

给你：

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

这只是JavaScript，请参阅fiddle for everything，因为我稍微修改了您的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';
    }
});

这是你的电话号码

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

此代码不会将div置于输入的中心，而是位于左侧。为了使其居中，您需要首先确定两者（div和输入）的宽度，然后将其添加到“.left”后面

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

---

此代码不会将div置于输入的中心，而是位于左侧。为了使其居中，您需要首先确定两者（div和输入）的宽度，然后将其添加到“.left”之后，以基于另一个元素居中

获取要居中的元素的宽度和左值

然后获取要居中的元素的宽度

然后两种宽度各减半

从居中元素半宽度减去居中元素半宽度

将此新值添加到“中心位置”元素的左侧

因此：

---

要基于另一个元素将一个元素居中

获取要居中的元素的宽度和左值

然后获取要居中的元素的宽度

然后两种宽度各减半

从居中元素半宽度减去居中元素半宽度

将此新值添加到“中心位置”元素的左侧

因此：

---

要想让它精确地位于场地的中心，就要像@PatrickEvans shows那样。但是我把他的小提琴改了一点，这样红色的盒子就不会出现在田野下面那么远的地方。这把小提琴显示了它在不同宽度的场地上的外观，所以你可以验证它是否计算正确：是的，本来打算把它移到正下方，但我想他可以做这部分工作：）把它放在场地的正中央，就像@PatrickEvans shows一样。但是我把他的小提琴改了一点，这样红色的盒子就不会出现在田野下面那么远的地方。这把小提琴显示了它在不同宽度的字段上的外观，所以你可以验证它是否计算正确：是的，本来打算把它移到下面，但我想他可以做这部分工作：）检查你的小提琴，它似乎不适合我。回车键不起任何作用。小提琴修好了。我无意中错误地设置了JQuery版本。检查你的小提琴，它似乎不适合我。回车键不起任何作用。小提琴修好了。我无意中错误地设置了JQuery版本。

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