[英]Have div appear to the right of a TD onclick of TD with jquery/javascript?
所以我有一个绝对定位的 5x5 像素正方形的 div。
如果我有一张桌子说
<table><tr><td>Something</td></tr></table>
当我单击 TD 内的任何位置时,我希望 div 恰好显示在 TD 的右侧,因此无论我在 TD 中的哪个位置单击,它都应该显示在 TD 的右侧。 有没有一种简单的方法可以在 Jquery/Javascript 中实现这一点?
我建议使用隐藏的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;
}
.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; }
也许将您的 hover 贴在 tr 元素上。
$('tr').click(
function() {
$(this).find('.hidden div').toggle();
});
给TD相对position。 并将 div 放入其中。 给你的 div
right:0px;
点击
给你的 div 风格:
left:50%;
margin-left:-2px //(these might need to be change a bit)
Select 在使用 jQuery 选择器(使用 class 或 id)之后要放置<td>
<td>
<td>,并使用 $.append()
以下是您选择 jQuery 标签的选项
http://api.jquery.com/category/selectors/
所以像
$("td").click(function(event) {
$(this).append("<td></td>");
});
是的,您可以通过几种方式处理它。 这里有一个想法:
$("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
})
})
这是使用职位的另一种解决方案。 虽然我不确定你是想要多个盒子还是只想要一个。
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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.