Have div appear to the right of a TD onclick of TD with jquery/javascript?

Question

So I have a absolute positioned div of 5x5 pixel square.

If I have a table say

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

I want the div to show up exactly to the right of the TD when I click anywhere inside of the TD, so it should appear snapped to the right side of the TD regardless of where I click in the TD. Is there a simple way to accomplish this in Jquery/Javascript?

Answer 1

I'd suggest using hidden table cells, and showing the div within that:

<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 .

---

Edited to revise the content a little, so that the containing ( .hidden ) td is always visible (to reduce the chance of page jumping around due to suddenly appearing table cells):

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 .

---

Edited as per @Nicky Waite's suggestion (below):

Maybe stick your hover on the tr element.

$('tr').click(

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

JS Fiddle demo .

Answer 2

give the TD relative position. and put the div inside it. give your div

right:0px;

on click

give your div style of:

left:50%;
margin-left:-2px //(these might need to be change a bit)

Answer 3

Select the <td> that you want to put a <td> after using a jQuery selector (either using a class or id), and use $.append()

Here are your options for selecting a jQuery tag

http://api.jquery.com/category/selectors/

So something like

$("td").click(function(event) {
     $(this).append("<td></td>");
});

Answer 4

Yes, you could handle it in a few ways. Here's one thought:

$("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

Here is another solution using positions. Although I wasn't sure if you wanted multiple boxes or just one.

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