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