javascript - div 是否出现在 TD 的 TD onclick 与 jquery/javascript 的右侧？

Question

所以我有一个 5x5 像素正方形的绝对定位 div。

如果我有一张 table 说

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

当我点击 TD 内部的任何地方时，我希望 div 恰好显示在 TD 的右侧，因此无论我在 TD 中单击何处，它都应该显示在 TD 的右侧。有没有一种简单的方法可以在 Jquery/Javascript 中完成此操作？

Answer 1

我建议使用隐藏的 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 Waite 的建议 编辑(如下):

Maybe stick your hover on the tr element.

$('tr').click(

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

JS Fiddle demo .