Josh Josh - 1 month ago 5
CSS Question

jQuery background color change on separate functions

Stripped down working jsfiddle

I have rows being highlighted if their checkbox is checked. It works on one table but for some reason I can't see why it's not doing the same on the other. All other functionality is exactly how I want it.

$(document).ready(function() {

$('#myteam').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
}
});
$('#otherteam').on('change', '[type=checkbox]', function() {
var $this = $(this);
var row = $this.closest('tr');
if ($this.prop('checked')) { // move to top
row.insertBefore(row.parent().find('tr:first-child'))
} else { // move to bottom
row.insertAfter(row.parent().find('tr:last-child'))
}
});
$('td:first-child input').change(function() {
$(this).closest('#myteam tr').toggleClass("highlight", this.checked);
});
$('td:first-child input').change(function() {
$(this).closest('#otherteam tr').toggleClass("highlight", this.checked);
});
});

Answer

Here is the problem $('td:first-child input'), remove :first-child in the second change event will be what you need because it isn't the first child.

Comments