Get cell index of table onClick with JQuery

Question

$('.details').click(function(){
  $(this).index()+1).toggleClass('.details, .overlay-wrapper');
});

Each table cell has some details/content in (hidden). Whenever a user selects the cell I need to pass through the index so only the details/div within the cell is shown.

Every single cell in the table has a div/details within the cell. So I need to only toggle on and off the div within the correct cell. At the moment it toggles every single details div on the page.

Thank you

JsFiddle is below with the html.

http://jsfiddle.net/t6yczwuo/

Answer 1

You have several problems with the code shown:

• Unmatched bracket
• Incorrect parameters for toggleClass (no . and no comma)

Without HTML this is all guesswork, but you seldom need the index to work with related cells. The following mockup use closest() to find the TD parent, then find() to find another related cell in the same TD:

$('.details').click(function(){
    $(this).toggleClass("details overlay-wrapper").closest('td').find('.someother').toggle();
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/gj2zz8po/

This example simply toggle the classes you specified on the details div, and hides/shows a related div within the same TD.

If you use this JSFiddle as the start of your example we can customise the code to match your situation.

Update for your new HTML:

$('.details-more').click(function (e) {
    e.preventDefault();
    $(this).closest('td').find('.overlay-wrapper .details').toggle();
});

http://jsfiddle.net/TrueBlueAussie/gj2zz8po/2/

Note: The e.preventDefault() should be used, even on bookmark links, to stop the page move to the top when clicked on a longer page.

Answer 2

You need .next() and not index() .

.toggleClass() accepts just a single class name without a . . Also, toggling the class on which you are using any kind of selector is not recommended.

$('.details-more').click(function(e){
    e.preventDefault();
    $(this).next('.overlay-wrapper').find('div').toggleClass('details');

    //Instead of find('div') you could use a specific class selector - 
    //find('.targetHidden') provided this class remains static throughout the html.
});

Updated Fiddle

Answer 3

HTML

<table style="width:100%">
  <tr>
    <td>Header</td>
    <td>Header</td> 
    <td>Header</td>
  </tr>
  <tr>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS THE SOME DETAILS OR CONTENT</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">THIS IS SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME TEST RANDOM STUFF</div></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <a href="#" class="details-more">Details</a>
        <div class="overlay-wrapper details">
            <div class="">SOME MORE CONTENT</div></div>
    </td>
  </tr>
  <tr>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
    <td>
        <div class="details"></div>
    </td>
  </tr>
</table>

CSS

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

.details {display:none;}

Javascript

$('.details-more').click(function(){
  $(this).next('.overlay-wrapper').toggleClass('details');
});