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);
精彩评论