[jQuery] Changing colour of table rows
Hi,
on a table list of results (amount of rows = unknown) I want to change
the row colour by adding / removing the class name
(class="highlighttr"). As my list is already 2 coloured (class="row1"
and class="row2"), I am checking the current, prev and next class name
of the parent tr element to set back the correct class name.
Now I am on the case, if all rows are checked - I cannot proof the
next and prev element, as all elements having the same "highlight"
class name.
I thought, if I would be able to count all tr rows, I would know on
which row I am currently and I would now the right class name.
Is there a way to count the rows of a specfic< table
class="resultslist"> or even better the TR elements of the <tbody> of
#resultslist? And how do I know on what row I am currently are when a
checkbox was clicked?
For a better reference I paste you my code.
Thanks so far!
Code:
$(document).ready(function() {
// Change colour of selected row
$("input:checkbox").click(function(){
var checked_status = this.checked;
//alert(checked_status);
var name_current = $(this).parents("tr:eq(0)").attr('class');
var name_next = $(this).parents("tr:eq(0)").next().attr('class');
var name_prev = $(this).parents("tr:eq(0)").prev().attr('class');
//alert(name_current);
//alert(name_next);
//alert(name_prev);
if(checked_status == true) {
//alert('checked');
$(this).parents("tr:eq(0)").removeClass(name_current);
$(this).parents("tr:eq(0)").addClass('highlighttr');
}else{
//alert('unchecked');
$(this).parents("tr:eq(0)").removeClass('highlighttr');
if(name_next && name_next == 'row1'){
$(this).parents("tr:eq(0)").addClass('row2');
}else if(name_next && name_next == 'row2'){
$(this).parents("tr:eq(0)").addClass('row1');
}else if(!name_next && name_prev && name_prev == 'row1'){
$(this).parents("tr:eq(0)").addClass('row2');
}else if(!name_next && name_prev && name_prev == 'row2'){
$(this).parents("tr:eq(0)").addClass('row1');
}
}
});
});