CODEWITHSUNDEEP
jquery
winter sun
winter sun

Reputation: 582

finding selected clicked td within a table

hi
my table looks like this

<table>
<tbody>
  <tr>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='action'><a href="www.yahoo.com">go to some other url</a></td>
  </tr>
</tbody>
<tbody style='display:none'>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='center'>some text</td>
    <td class='action'><a href="www.yahoo.com">go to some other url</a></td>
  </tr>
</tbody>
<tbody style='display:none'>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody>

in the first view only the first tbody row is shown and the second tbody row is hidden.
I need that when user is clicking on the first table row the second table row will be displayed/hide.
I managed to do this with the following code

$('tbody').toggle(function(){
 $(this).next('tbody:first').show(); //display the first next tbody         
}
,function (){
 $(this).next('tbody:first').hide();//hide the next tbody
 }
);

now I also need that when the user is clicking on the table cell with the '.action' class this show/hide functionality will not happened and the table cell link will be preformed

I tried many options but nothing was working, I will appreciate if someone could give me some solution to this problem
THANKS

Upvotes: 0

Views: 420

Answers (2)

Felix Kling
Felix Kling

Reputation: 816364

One way is to check in the event handler where the event originated:

$('tbody').click(function(event){
     if(!$(event.target).is('td.action a')) {
         var $next =  $(this).next('tbody'); // no need for :first
         $next.toggle(!$next.is(':visible'));
     }
}

Reference: toggle, is, :visible

Upvotes: 1

SLaks
SLaks

Reputation: 887365

You can handle the click event for those cells and call e.stopPropagation to prevent the event from bubbling up to the <tbody>:

$('.action').click(function(e) { e.stopPropagation(); });

Upvotes: 1

Related Questions