如何解决div是否在使用jquery / javascript的TD onclick的TD的右侧显示?
| 所以我有一个5x5像素平方的绝对定位div。 如果我有桌子说<table><tr><td>Something</td></tr></table>
当我单击TD内的任何位置时,我希望div完全显示在TD的右侧,因此无论单击TD的位置如何,该div都应显示在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;
}
JS小提琴。
编辑内容进行了一些修改,以使包含(the6ѭ)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.2);
}
.hidden div {
display: none;
}
.hidden div {
height: 5px;
width: 5px;
background-color: #f90;
}
JS小提琴。
根据@Nicky Waite的建议进行编辑(如下):
也许将鼠标悬停在tr元素上。
$(\'tr\').click(
function() {
$(this).find(\'.hidden div\').toggle();
});
JS Fiddle演示。
,给出TD的相对位置。并将div放入其中。给你的div
right:0px;
点击
给你的div风格:
left:50%;
margin-left:-2px //(these might need to be change a bit)
,在使用jQuery选择器(使用类或ID)之后,选择要放置“ 13”的“ 13”,然后使用$ .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;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。