有沒有div出現在TD的TD onclick跟jquery/javascript？

Question

所以我有一個5x5像素平方的絕對定位div。

如果我有一個表，說

<table><tr><td>Something</td></tr></table> 

我想股利準確顯示到TD的權當我點擊TD內的任何地方，所以它應該出現搶購到右側無論我在TD上點擊的位置如何。有沒有簡單的方法來完成這個在jquery/Javascript？

Answer 1

給出TD的相對位置。並把它放在裏面。給你的div

right:0px;

上點擊

給你的div風格：

left:50%; 
margin-left:-2px //(these might need to be change a bit) 

Answer 2

選擇您想要把一個<td>使用jQuery選擇後<td>（或者使用類或ID），並使用$ .append（）

以下是您選擇jQuery標記的選項

http://api.jquery.com/category/selectors/

因此，像

$("td").click(function(event) { 
    $(this).append("<td></td>"); 
}); 

Answer 3

我建議使用隱藏table細胞，並呈現內的div：

<table> 
    <tr> 
     <td>Something</td> 
     <td class="hidden"><div></div></td> 
    </tr> 
    <tr> 
     <td>Something</td> 
     <td class="hidden"><div></div></td> 
    </tr> 
</table> 

的jQuery：

$('tr td').click(
    function(){ 
     $(this).closest('tr').find('.hidden').toggle(); 
    }); 

CSS：

td { 
    vertical-align: middle; 
    width: 5em; 
    height: 2em; 
} 

.hidden { 
    display: none; 
} 

.hidden div { 
    display: block; 
    height: 5px; 
    width: 5px; 
    background-color: #f90; 
} 

JS Fiddle。

---

編輯的內容修改了一點，使含（ .hidden） td總是可見的（減少跳來跳去頁的機會，由於突然出現的表格單元格）：

jQuery的：

$('tr td').click(

function() { 
    $(this).closest('tr').find('.hidden div').toggle(); 
}); 

CSS：

table { 
    empty-cells: show; 
} 

td { 
    vertical-align: middle; 
    width: 5em; 
    height: 2em; 
} 

td:hover { 
    background-color: rgba(255,255,0,0.2); 
} 

.hidden div { 
    display: none; 
} 

.hidden div { 
    height: 5px; 
    width: 5px; 
    background-color: #f90; 
} 

JS Fiddle。

---

編輯按@Nicky維特的建議（下）：

也許堅持tr元素在你的懸停。

$('tr').click(

function() { 
    $(this).find('.hidden div').toggle(); 
}); 

JS Fiddle demo。

Answer 4

是的，你可以用幾種方法處理它。這裏有一個想法：

$("td").click(function(e) { 
    el = $(e.target); 
    el.after("<div class='my_square' />"); 
    sq = $(el + " + .my_square"); 
    sq.css({ 
    position: "absolute", 
    left: el.offset().left, 
    top: el.offset().top + el.outerHeight()/2 
    }) 
}) 

Answer 5

這是另一種使用職位的解決方案。雖然我不確定你是否想要多個盒子或只有一個盒子。

http://jsfiddle.net/nickywaites/DvTBR/

$(function() { 

$('#summary td').click(function() { 

    var td = $(this); 
    var position = td.position(); 
    $('#link').css({ 
     top: position.top + (td.height()/2), 
     left: position.left + td.width() + 10 
    }).show(); 

}); 

}); 

<div id="link"></div> 
<table id="summary"> 
<tr><td>Toast</td></tr> 
<tr><td>Toast</td></tr> 
</table> 

#link { 
width:5px; 
height:5px; 
background-color:royalblue; 
display:none; 
position:absolute; 
}