ansaurus

Question

How to highlight the selected row in a table using Jquery?

Answer 1

A:

Hey,

Perhaps this :

$('table input[type=checkbox]').click(function(){
if($(this).is(':checked'))
$(this).parents('tr :first').addClass('myStyleClass');
else
$(this).parents('tr :first').removeClass('myStyleClass');
});

sTodorov 2010-10-30 06:08:55

Answer 2

+1 A:

I think you want something like this

$('input[type=checkbox]').click(function(){ 
    var cb = $(this);
    var tr = cb.closest('tr');
    cb.attr('checked') ? tr.addClass('highlight') : tr.removeClass('highlight');
});

css to change the background colors specifically in your example

.highlight .tableeven { background-color: #f00; }
.highlight .tableodd { background-color: #c00; }

jayrdub 2010-10-30 06:09:29

This will apply when the text color is changed.But If I want to change the entire background color it wont apply.How can I apply entire backgorund change.http://jsfiddle.net/qWCs3/14/

vinothkumar 2010-10-30 06:38:37

That's all in how you structure your css, it seems like you know css well enough to write a class that will change the background color of a row. The reason the answer you accepted works is because it changes the classnames of all the tds as well. I was assuming you knew how to write cascading styles. I added an example to my answer.

jayrdub 2010-10-30 06:46:18

Answer 3

+1 A:

$(document).ready(function()
{
    $('td input[type="checkbox"]').click(function(){
        if ($(this).is(':checked')){
              $(this).parent().addClass('highlighted');
              $(this).parent().siblings().addClass('highlighted');
        } else if($(this).parent().is('.highlighted')) {
             $(this).parent().removeClass('highlighted');
             $(this).parent().siblings().removeClass('highlighted');
        }
    });
});

There's some different ways to get the row highlighted. But I just added a class called highlighted that had a background color and set it to all the tds

Logan Bailey 2010-10-30 06:21:36

Is there any possibilities to highlight only one row at a time.That is the user can choose only one check box.

vinothkumar 2010-10-30 07:00:04

This should only highlight the dt's in the given row. The action is bound to all input types that are checkboxes in a td. If it is clicked(the checkbox), it script then determines if the checkbox was checked or unchecked. If it was checked it adds the class highlighted to the parent td and all of the tds that are with in that tr, what specifically do you want to have happen?

Logan Bailey 2010-10-30 17:47:35

ansaurus

tags:

views:

answers:

How to highlight the selected row in a table using Jquery?

related questions