开发者

Changing color of table column text when checkbox is checked

I have a table where per row the first col开发者_Python百科umn is a checkbox and the remaining columns are text. What I'd like to do is retroactively change the color of the text in columns 2:n for any rows where the checkbox is checked.

I'm using jQuery (and trying to refresh my knowledge of it) so a solution using this would be preferred but straight JS is also AOK.

Solution Found:

$("input:checked").each(function(idx) {
   $(this).parent().siblings('td').css("color", "red");
});


Here's a jsfiddle example that turns the sibling <td> elements red when a checkbox is checked and turns them white when it's unchecked.

With this basic HTML,

<table>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
    <tr><td><input type="checkbox" /></td><td>Cell 2</td><td>Cell 3</td></tr>
</table>

And this Javascript.

(function($) {
    $(document).ready( function() {
        $('input[type=checkbox]').click( function(e) {
            var bgColor = $(this).attr('checked') == 'checked' ? '#f00' : '#fff';

            $(this).parent().siblings('td').css('background', bgColor);   
        }); 
    });

})(jQuery);
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜