Question

I have this html

<table border="1">
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            Hello
        </td>
        <td>
            my friend!
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox">
        </td>
        <td>
            ...
        </td>
        <td>
            ...
        </td>
    </tr>
    ...
</table>

What do I need to do if I want to change my <tr> bgcolor when the checkbox is activated? I guess I will need to do something with onclick() maybe.

EDIT: What I need is that the checkbox should modify only his current row.

Answer 1

One of the possible approaches:

document.getElementById('table').onclick = function(e) {
    var e = e || event,
        el = e.srcElement || e.target;
    if (el.tagName == 'INPUT') {
        el.parentNode.parentNode.className = el.checked ? 'active' : '';
    }
};

http://jsfiddle.net/TQbpH/2/

In this example event bubbles to the parent table which listens to it, and then it’s dispatched if needed.