jquery clickable table row, except td with specific class name
Asked Answered
F

2

6

I have a table like this

<tbody>
   <tr class="row-links" data-link="http://mylink.com">
     <td>some cell</td>
     <td>some cell</td>
     <td>some cell</td>
     <td class="special-td"><a href="http://followthis.com">special cell</a></td>
     <td>some cell</td>
     <td class="special-td">special cell</td>
     <td>some cell</td>
   </tr>
</tbody>

I want to make the whole row clickable, expect some "special cells" which I have given an identifying class name "specal-td"

The link for the whole row in general is stored in the "data-link" attribute

The code I have come up with thus far... which is not working is below:

$('.row-links td:not(.special-td)').on('click', function(e){


    //get the link from data attribute
    var the_link = $(this).attr("data-link");

    //do we have a valid link      
    if (the_link == '' || typeof the_link === 'undefined') {
        //do nothing for now
    }
    else {
        //open the page
        window.location = the_link;
    }
});

Any help is most welcome

UPDATE:

Thanks to the asnwers given by (PhoenixWing156 & MDJ) the working code now looks like this

$('.row-links').on('click', 'td:not(.special-td)', function(){


    //get the link from data attribute
    var the_link = $(this).parent().attr("data-link");

    //do we have a valid link      
    if (the_link == '' || typeof the_link === 'undefined') {
        //do nothing for now
    }
    else {
        //open the page
        window.location = the_link;
    }
});
Freeload answered 23/8, 2014 at 22:40 Comment(1)
The solution was using both PhoenixWing156 & MDJ answers. Thanks to you both, unfortunately I can only mark one answer as correctFreeload
P
11
$('.row-links').on('click', 'td:not(.special-td)', function(){
   //Do something
});
Ploch answered 23/8, 2014 at 23:0 Comment(1)
Thanks for the answer. I also had to use PhoenixWing156 code to get the link valueFreeload
Q
2

The data-link attribute is defined for the "tr" element, not the "td" element that was clicked on. You probably want to change this line:

//get the link from data attribute
var the_link = $(this).attr("data-link");

to this:

//get the link from data attribute
var the_link = $(this).parent().attr("data-link");
Quahog answered 23/8, 2014 at 22:44 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.