有没有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; 
}