Paul Leading Paul Leading - 4 months ago 12
jQuery Question

Open div in current clicked TD

<table id="tab">
<tr><td class="click" id="111">111</td> <td id="222" class="click">222</td></tr>
<tr><td class="click" id="333">333</td> <td id="444" class="click">444</td></tr>
</table>

<div id="hidden">
text
</div>

#tab tr td {
padding: 10px;
border: solid 1px red;
}

#hidden {
background-color:green;
width: 40px;
height: 40px;
display: none;
}

$(".click").click(function(){
$("#hidden").show();
})


How to open div #hidden in current clicked TD? and if i click outside #hidden i would like hide this div.

Fiddle: http://jsfiddle.net/QyRnH/2/

Answer

I'm not sure what you mean by "How to open div #hidden in current clicked TD", but to show and hide the #hidden div you could do like this: http://jsfiddle.net/QyRnH/7/

<table id="tab">
  <tr>
    <td class="click" id="111">1</td> 
    <td class="click" id="222">2</td>
  </tr>
  <tr>
    <td class="click" id="333">3</td> 
    <td class="click" id="444">4</td>
  </tr>
</table>

<div id="hidden">text</div>

$(".click").click(function(e){
   $("#hidden").show();
   $("#hidden").appendTo($(this));
   e.stopPropagation();
});
$(document).click(function() {
   $('#hidden').hide();
});