Question

Hi have a table that has many rows

The first row has <th>s then all the following rows contain <td>s

If I use the script below and click on the the first row with <td>s in it I get an alert saying 1. How do I make it say zero with out subtracting one. I thought that using “has(td)” would work?

$('td').click(function(){

   var s = $(this).parents('table tr:has(td)').index();
   alert(s);

});

<table border="1" width="400px" height="200px">
    <tr>
        <th></th><th></th><th></th><th></th><th></th>
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td> if I click here it must alert 0
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td> if I click here it must alert 1
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td> if I click here it must alert 2
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td> if I click here it must alert 3
    </tr>
    <tr>
        <td></td><td></td><td></td><td></td><td></td> if I click here it must alert 4
    </tr>

</table>

Answer 1

Pass the a selector to .index() to filter out the siblings

$('td').click(function(){
    var s = $(this).parent().index('tr:has(td)');
    alert(s);
});​

http://jsfiddle.net/nAhE3/