Question

I hope this is the right area, as it is more theoretical than anything else. I am currently working on a page where a user can select one or many rows to edit by clicking a checkbox in the leftmost column and clicking an Edit button. I haven’t decided if I wanted to try programming this feature, but would it be possible to effectively hide the checkboxes and use some sort of javascript or jquery to make clicking a row in a table equivalent to checking the corresponding row’s checkbox? I have just started working with javascript and jquery, and I am baffled by how powerful this can be. Please inform me if this type of functionality is possible and if so, what is a general approach to achieving this behavior?

Answer 1

Doable. Here’s how:

jsbin link

HTML

<table border=1>
    <tr><td><input type="checkbox"></td><td>Something 1</td><td>Something else 1</td></tr>
    <tr><td><input type="checkbox"></td><td>Something 2</td><td>Something else 2</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 3</td><td>Something else 3</td></tr>    
    <tr><td><input type="checkbox"></td><td>Something 4</td><td>Something else 4</td></tr>
</table>

jQuery

$('input[type=checkbox]').parent('td').hide(); // If JS disabled, checkboxes are still visible

$('table tr').click( function() {
    var $chk = $(this).find('input[type=checkbox]');
    $chk.prop('checked',!$chk.prop('checked'));
    $(this).toggleClass('selected'); // To show something happened
});

CSS

tr.selected{
   background-color:#ccc;
}