CODEWITHSUNDEEP
javascriptjquery
John Smith
John Smith

Reputation: 1687

Changing the color of a clicked table row using jQuery

I need your help,

How can I, using jQuery,

Change the background color of the selected row in my table (for this example, let's use the the css class "highlighted"

and if the same row is clicked on again, change it back to its default color (white) select the css class "nonhighlighted"

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

.highlighted {
    background: red;
}
.nonhighlighted {
    background: white;
}
</style>

</head>

<body>

<table id="data" border="1" cellspacing="1" width="500" id="table1">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

</body>

</html>

Upvotes: 17

Views: 114704

Answers (10)

Saeid
Saeid

Reputation: 658

Set background-color

.highlight { background-color: red; }

for selecting just one row

 $("#Table_Id tr").click(function () {
        $("#Table_Id tr").removeClass("highlight");
        $(this).addClass("highlight");
    });

for selecting multi rows

 $("#Table_Id tr").click(function () {
        $(this).addClass("highlight");
    });

Upvotes: 0

Marco Puenayan
Marco Puenayan

Reputation: 9

To change color of a cell:

$(document).on('click', '#table tbody td', function (event) {


    var selected = $(this).hasClass("obstacle");
    $("#table tbody td").removeClass("obstacle");
    if (!selected)
        $(this).addClass("obstacle");

});

Upvotes: -2

Kinjal Gohil
Kinjal Gohil

Reputation: 968

.highlight { background-color: papayawhip; }

$("#table tr").click(function() {    
 $("#table tr").removeClass("highlight");
            $(this).addClass("highlight");
});

Upvotes: 0

Nick Kahn
Nick Kahn

Reputation: 20078

I'm not an expert in JQuery but I have the same scenario and I able to accomplis like this:

$("#data tr").click(function(){
   $(this).addClass("selected").siblings().removeClass("selected"); 
});

Style:

<style type="text/css">

.selected {
    background: red;
}

</style>

Upvotes: 1

Gabriel Glauber
Gabriel Glauber

Reputation: 971

Remove the second id declaration of table: 

<table id="data" border="1" cellspacing="1" width="500" **id="table1"**>

Upvotes: 0

jrthib
jrthib

Reputation: 1319

Here's a possible solution that will color the entire row for your table.

CSS

tr.highlighted td {
    background: red;
}

jQuery

$('#data tr').click(function(e) {
    $('#data tr').removeClass('highlighted');
    $(this).toggleClass('highlighted');   
});

Demo: http://jsfiddle.net/jrthib/HVw7E/2/

Upvotes: 5

Louis Ricci
Louis Ricci

Reputation: 21116

.highlight { background-color: red; }

If you want multiple selections

$("#data tr").click(function() {
    $(this).toggleClass("highlight");
});

If you want only 1 row in the table to be selected at a time

$("#data tr").click(function() {
    var selected = $(this).hasClass("highlight");
    $("#data tr").removeClass("highlight");
    if(!selected)
            $(this).addClass("highlight");
});

Also note your TABLE tag has 2 ID attributes, you can't do that.

Upvotes: 56

Katstevens
Katstevens

Reputation: 1571

Create a css class that applies the row color, and use jQuery to toggle the class on/off:

CSS:

.selected {
    background-color: blue;
}

jQuery:

$('#data tr').on('click', function() {
    $(this).toggleClass('selected');
});

The first click will add the class (making the background color blue), and the next click will remove the class, reverting it to whatever it was before. Repeat!

In terms of the two CSS classes you already have, I would change the .nonhighlighted class to apply to all rows of the table by default, then toggle the .highlighted on and off:

<style type="text/css">

.highlighted {
    background: red;
}

#data tr {
    background: white;
}

</style>

$('#data tr').on('click', function() {
    $(this).toggleClass('highlighted');
});

Upvotes: 11

VishalDevgire
VishalDevgire

Reputation: 4278

jQuery : 

$("#data td").toggle(function(){
    $(this).css('background-color','blue')
},function(){
    $(this).css('background-color','ur_default_color')
});

Upvotes: 0

aleation
aleation

Reputation: 4834

in your css:

.selected{
    background: #F00;
}

in the jquery:

$("#data tr").click(function(){
   $(this).toggleClass('selected');
});

Basically you create a class and adds/removes it from the selected row.

Btw you could have shown more effort, there's no css or jquery/js at all in your code xD

Upvotes: 1

Related Questions