How can I modify the style of table rows with CSS?

Question

How can I modify the style of table rows with CSS?

Is there a way to change the color/background of a selected row just like it does on hover, and also have the option to deselect the row?

To see how it looks on hovering, check out: http://jsfiddle.net/q7ApN/

If you want to make a Change:

#gradient-style tbody tr:hover td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

The Change Would Be:

#gradient-style tbody tr:hover, tr.selected td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

Actual HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
... [remaining code omitted for brevity] ...

Any suggestions or solutions for this issue?

javascript jquery html css

Answer 1

Answer №1

Here is a solution that should meet your needs. When you click on a row, the selected class will toggle on the tr element. If you then click on another row, the selected class will be removed from the previously selected row.

$(document).ready( function() {
    $("tr").click(function(){
        $(this).toggleClass('selected').siblings().removeClass('selected'); 
    });
});

To update the styles accordingly, as mentioned by others before, you can use the following CSS:

#gradient-style tbody tr:hover td,
#gradient-style tbody tr.selected td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

You can view a live example of this code in action here: http://jsfiddle.net/davidpauljunior/q7ApN/8/

Answer 2

Here is a solution that should meet your needs. When you click on a row, the selected class will toggle on the tr element. If you then click on another row, the selected class will be removed from the previously selected row.

$(document).ready( function() {
    $("tr").click(function(){
        $(this).toggleClass('selected').siblings().removeClass('selected'); 
    });
});

To update the styles accordingly, as mentioned by others before, you can use the following CSS:

#gradient-style tbody tr:hover td,
#gradient-style tbody tr.selected td {
    background: #d0dafd url('table-images/gradhover.png') repeat-x;
    color: #339;
}

You can view a live example of this code in action here: http://jsfiddle.net/davidpauljunior/q7ApN/8/

Answer 3

Answer №2

Give this code a try, it should do the trick

Make the following changes in your CSS

#gradient-style tbody tr.selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x;
        color: #339;
    }

Script to Add

$("#gradient-style tr").click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected'); 
});

Check out the Fiddle

Answer 4

Give this code a try, it should do the trick

Make the following changes in your CSS

#gradient-style tbody tr.selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x;
        color: #339;
    }

Script to Add

$("#gradient-style tr").click(function(){
    $(this).toggleClass('selected').siblings().removeClass('selected'); 
});

Check out the Fiddle

Answer 5

Answer №3

http://example.com/jsfiddle

Everything seems to be functioning properly.

$("tr").on('click', function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");
});

The addition of !important is necessary for the following:

.selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x !important;
        color: #339;
}

Answer 6

http://example.com/jsfiddle

Everything seems to be functioning properly.

$("tr").on('click', function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");
});

The addition of !important is necessary for the following:

.selected td {
        background: #d0dafd url('table-images/gradhover.png') repeat-x !important;
        color: #339;
}

Answer 7

Answer №4

Make sure to review the link provided http://jsfiddle.net/q7ApN/3/

$("tr").click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");

});

Answer 8

Make sure to review the link provided http://jsfiddle.net/q7ApN/3/

$("tr").click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass("selected");

});

How can I modify the style of table rows with CSS?

If you want to make a Change:

The Change Would Be:

Actual HTML Code:

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is my strategy for testing a middleware that accepts arguments?

Flask Modal fails to function properly in the absence of table data

Update links within a designated div section

The method to permit a single special character to appear multiple times in a regular expression

Retrieve various URLs within an object using React

Adjusting the height of the Owl Carousel div to enhance image hover effects

Server side Meteor with reactive coffee on client

Ensure that the footer remains at the bottom of the page without being fixed to the bottom

Issue: Module 'connect' is not found?

The ngFor directive is not compatible with third-party library elements

Keep updating every second using setInterval

Identify when two calendar dates have been modified

Replace automatically generated CSS with custom styles

Four unique chip/tag colors, personalized to suit your style

Accessing Ionic rootScope within the config stateprovider - A step-by-step guide

Delaying Default Event Behavior in Jquery

issues with redirection of form validation

Synchronizing code paths that involve both ajax and non-ajax functions can be achieved by

Effortless File Uploading in JERSEY using jquery and AJAX

Guide to integrating external plugins in an Angular application