顯示在所選擇的TD

我有了一些輸入表的底部的中心股利。當用戶在輸入按下回車鍵顯示在所選擇的TD

，我想把下面的股利選定的輸入（在中心）。

的例子：

enter image description here

這是我的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>

來源

2014-02-11 Alon Shmiel

在這裏你去：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'; 
    } 
});

來源

2014-02-11 16:53:44 gfrobenius

爲了得到它在該領域的正中心不喜歡@PatrickEvans節目。但我改變了他的小提琴，以便紅色方框不會出現在遠遠低於字段。這個小提琴顯示了它在不同寬度的字段上的顯示效果，因此您可以驗證它是否正確計算：** http：//jsfiddle.net/NNGSX/1/** – gfrobenius

是的，它會將它移動到正確的位置，但是我認爲他可以做那部分工作:) –

這裏是JSFiddle

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

在卸下顯示器的行之後添加以下代碼：從DIV沒有。

此代碼不會將div居中對齊輸入，而是位於左側。爲了居中必須先確定兩者的寬度（div和輸入端），然後將「左」後添加它

來源

2014-02-11 16:59:32

檢查你的小提琴，它似乎並不適合我。輸入密鑰什麼都不做。 – gfrobenius

小提琴固定。我偶然錯誤地設置了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(); 
    } 
});

JSFiddle Demo

來源

2014-02-11 17:04:14

顯示在所選擇的TD

回答

相關問題