Tr: not (: first-child) is ignored for some reason

Question

I have an HTML table generated through SQL and PHP. At the <table> level, there is a JS onClick event.

I am trying to customize it, so the first row (first row below <TH> ) and the first three columns are not part of the event. These rows / columns are forms, not part of the active data.

I have a below script and TD successfully ignored, but I cannot remove the onClick warning onClick first TR no matter how I change the code.

Everything else works 100% as expected. I know that this may not be the best or most effective way for what I need, but everything I managed to collect works as expected.

 $('table tr:not(:first-child) td:not(:nth-child(-n+3))') .unbind() .click(function(clickSpot){ var clickID = $(this).closest('tr').find('td:eq(3)').text(); alert(clickID); }) 

Answer 1

You can use thead and tbody since it seems like you want to use tbody here - OR move these “forms” from the table, place it above, then use $('table').find('tbody').find('td:not(:nth-child(-n+3))') It might be better to just add classes to the things you want or those you don't need.

Unbind is deprecated, so I used off and on here.

Example, add classes to the rows of the table that you want to customize.

Having understood your question a bit, I just used tbody and skipped all the td that has an input that seems to be what you really want and does the job if you change the table to have more checkboxes.

 $('table').find('tbody') .on('click','td:not(:has("input"))',function(event){ var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); }); 

 tr td {border: solid green 1px;} tr.useme td {border:solid blue 1px;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th>Header content 1</th> <th>Header content 2</th> <th>Header content 3</th> <th>Header content N</th> <th>Header content N</th> <th>Header content N</th> <th>Header content N</th> </tr> </thead> <tbody> <tr> <td>Body content 1</td> <td>Body content 2</td> <td>Body content 3</td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> </tr> <tr class='useme'> <td><input type="checkbox" /></td> <td><input type="checkbox" /></td> <td>Body content 3</td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> </tr> <tr class='useme'> <td><input type="checkbox" /></td> <td>Body content 2</td> <td><input type="checkbox" /></td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> <td>Body content N</td> </tr> </tbody> </table> 

To attach tables to an example, you may need to change td to target. The fact is that the event handler is attached to tbody here, adding rows does not matter, they still receive events. There is no need to re-do this each time a table row is added while the tbody remains in place.

 $('table').find('tbody') .on('click','td',function(event){ var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); }); 

Original:

 $('table').find('tbody') .find('tr.useme').find('td') .off('click').on('click',function(event){ var clickID = $(this).closest('tr').find('td').eq(3).text(); alert(clickID); });