Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I am trying to generate click event on every table data <TD> except the last one <td> but It's just working with the First row not the rest.

HTML:

<table class="table" style="width:100%;">
<tbody>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
</tbody>
</table>
JS code:  
$('.table tbody').on('click', 'tr td:lt(3)', function(){
    // Trying to check the click event
    console.log('working');
JSFIDDLE
jsfiddle
If i remove the :lt(3) selector then its working fine but i don't know why it's not working with less then selector?
                IMHO, you would be better off adding a specific class to the tds you want to identify - e.g.  <td class"disabledTd">. Your javascript code will depend less on how your html is setup, and allow you for smoother changes (suppose you have to add a columns ? or change their order ?)
– LeGEC
                Aug 22, 2013 at 8:52
  
The index-related selectors (including this "less than" selector)
  filter the set of elements that have matched the expressions that
  precede them. They narrow the set down based on the order of the
  elements within this matched set. For example, if elements are first
  selected with a class selector (.myclass) and four elements are
  returned, these elements are given indices 0 through 3 for the
  purposes of these selectors.
In your case, tr td is matched first which matches 16 cells, then the first 3 elements from the resulting set are filtered. You could revise the code like this:
// trap clicks on .table tbody and filter all td elements
$('.table tbody').on('click', 'td', function () {
    if ($(this).index() < 3) {
        console.log('working');
Or better, use the CSS3 :nth-child() selector which is also available in jQuery:
// trap clicks on .table tbody and filter all td elements
// that are "-n+3"th child of their parent
$('.table tbody').on('click', 'td:nth-child(-n+3)', function () {
    console.log('working');
The nth-child selector is explained here.
If you don't, it will take the first 3 td, of all tbody, not the one of each row (you can try your code with 5 instead of 3, and see what's happening : it will be applied on tr 1 : td 1, td 2, td 3, td 4 and tr2 : td 1 ( the first 5 td of tbody)
jsfiddle
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.