I made my table row clickable with this function
$("#grid tbody tr").click(function () { var $checkbox = $(this).find(':checkbox'); $checkbox.attr('checked', !$checkbox.attr('checked')); });
and it works fine, however when I try to click the checkbox self, it doesnt work. What should I do to make both of them work?
Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.
rowlink and attribute data-link="row" to a <table> or <tbody> element. For other options append the name to data-, as in data-target="a. mainlink" A cell can be excluded by adding the . rowlink-skip class to the <td> .
If you add "display: block" CSS style tag to the anchor objects in the cells that you want to be clickable it will make the entire cell (minus any padding) act like a button. The cursor is displayed correctly and it previews the link destination in the status bar.
Using a single event handler:
$("#grid tbody tr").click(function(e) { if (e.target.type == "checkbox") { // stop the bubbling to prevent firing the row's click event e.stopPropagation(); } else { var $checkbox = $(this).find(':checkbox'); $checkbox.attr('checked', !$checkbox.attr('checked')); } });
http://jsfiddle.net/karim79/UX2Fv/
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