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;
}
});
$('.row-links').on('click', 'td:not(.special-td)', function(){
//Do something
});
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With