Switch Between Different Background Colors for Table Rows With Each Click

Question

Switch Between Different Background Colors for Table Rows With Each Click

This script changes colors when a row in a specific column is clicked:

$(document).ready(function(){
$("#rowClick").children("tbody").children("tr").children("td").click(function(){
    $(this.parentNode).toggleClass("enroute");
});

});

CSS:

.placed{
background: #3498db;}

.pickedUp{
background: #f1c40f;}

.enroute{
background: #2ecc71;}

You can view some examples here: http://jsfiddle.net/pqyxM/5/ and http://jsfiddle.net/FSFpZ/

If you have any insights on how to make the color change persist with each click, please share your thoughts. Thank you!

javascript jquery html css

Answer 1

Answer №1

Perhaps this solution may meet your requirements, by incorporating additional code to switch the class name and store it in a variable.

Subsequently, you can employ this variable to alternate the succeeding color: http://jsfiddle.net/reubenhutton/FSFpZ/55/

var className; 
    $.each(classes, function(key, val){
        if($(self).hasClass(val)){
            className = val;
            $(self).removeClass(val); 
        }
    })

Answer 2

Perhaps this solution may meet your requirements, by incorporating additional code to switch the class name and store it in a variable.

Subsequently, you can employ this variable to alternate the succeeding color: http://jsfiddle.net/reubenhutton/FSFpZ/55/

var className; 
    $.each(classes, function(key, val){
        if($(self).hasClass(val)){
            className = val;
            $(self).removeClass(val); 
        }
    })

Switch Between Different Background Colors for Table Rows With Each Click

Answer №1

Similar questions

Bypass the Array.reduce method in JavaScript

Picture in the form of a radio button

What is the proper way to credit the glyphicons element in Twitter's bootstrap framework?

Having trouble retrieving input field values with Angular.js

How can one append a string of text to the right of each bar? Let's find out!

The moment a file is uploaded from an HTML page, control is passed on to the servlet

Displaying text files containing escaped characters using Express.js

Managing elements within another element in Angular

What is the best way to maintain the index of a for loop when incorporating AJAX to insert PHP data into an object?

Identifying a failed Ajax Request in JavaScript

After refreshing the page, the ngRoute white page is displayed

Storing user input in MongoDB after encoding

Creating a dynamic multi-select feature in AngularJS with ng-repeat

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

Creating a centered floating card within a div that shrinks to fit its contents: A CSS how-to guide

the sizing issue with three div elements

The appearance of my HTML website varies significantly across different devices used by viewers

Issue: Experiencing multiple re-renders when attempting to send a post request to the backend using

How can we universally detect and resolve the user's language within a React/Next.js application using an Apollo client HOC?

Default page featuring an AngularJS modal dialog displayed