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!

javascriptjqueryhtmlcss

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); 
        }
    })

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to trigger a JavaScript popup from an iframe window to the parent window

Currently I am developing a web application using JSP with JavaScript. Within the parent window, an iframe is being utilized. The issue arises when a button in the iframe page is clicked, as it opens a popup window within the iframe itself. However, my obj ...

javascripthtmljsp

Requesting a resource using the HTTP GET method returned no data

Looking to process the response from an http-request using JavaScript? Check out this straightforward example below. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x ...

javascriptjqueryajax

Create a unique bar chart plugin using Javascript/jQuery that allows users to drag and drop data

My current project involves developing a custom bar chart generator that must meet specific criteria: Input fields for entering data to display on the chart The ability to drag and resize bars once the chart is generated I've conducted research and ...

javascriptjquerycharts

Tips for accessing hidden field values in a second jsp page

I have a webpage called page1.jsp where I am including hidden fields. Here is the code snippet: <form action = "page2.jsp" method = "post" id = "hiddenValuesForm"> <input type = "hidden" name = "userData" value="" id = "useDataID"> <input t ...

javascriptjavajqueryjspscriptlet

Conflicting jQuery in Magento

Within my head.phtml file, I have the following code to implement a menu: <script src="<?php echo $this->getJsUrl(); ?>lib/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="<?php echo $this->getJsUrl(); ?> ...

jquerymagento

Hide the div element when the url contains the word 'word'

I did some research online, but I couldn't find any information on whether this is doable. I'm currently using IPBoard and after their latest IPS4 update, I'm facing an issue where I can't simply change the homepage anymore. Now, I have ...

javascriptjquery

Execute Javascript/Jquery upon partial content loading

From what I can see, most of the examples and answers show how to run a partial's JavaScript when the page initially loads. In this case, the partial doesn't load until later, triggered by a button click using AJAX. I have experimented with pla ...

c#javascriptajaxasp.net-mvcasp.net-mvc-4

Steps for iterating over the "users" list and retrieving the contents of each "name" element

I'm attempting to iterate over the "users" array and retrieve the value of each "name". Although the loop seems to be functioning correctly, the value of "name" is returning as "undefined" four times. JavaScript: for(var i = 0; i < customer.users ...

javascriptjson

When verifying the source, the empty() function does not eliminate any HTML content

I am facing an issue with an AJAX call that retrieves data from a PHP file. I am attempting to remove existing HTML content and replace it with the data fetched from the PHP file. To clear the content, I am using the following: $('#due-tasks-content& ...

jqueryhtmlajax

I'm having trouble getting my CSS opacity to smoothly transition back to its original state of .5 using setTimeout(). What could be

I recently started learning JS, Jquery, and CSS. My goal is to create a Simon Says style game. However, when I attempt to animate the computer to automatically light up the correct square, I faced some challenges. To address this issue, I decided to star ...

javascriptjquerycss

Avoiding code execution by injections in Javascript/Jquery

Currently, I'm fetching JSON data for a .getJSON function in Jquery. To ensure the data's security, I am considering using .text (I believe this is the correct approach). The JSON has been successfully validated. Below is the script that I am cu ...

javascriptjqueryjson

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

Despite numerous attempts, I am struggling to find a solution that works for me. In my Courses controller, I am using the Students service and Staff service to access my staff and student objects. My goal is to retrieve the staffs and students objects in o ...

javascriptangularjsmeanjs

Encountered an issue with reading the property 'drop' from an undefined source during a straightforward migration

I recently started using the migrate-mongo library and encountered an issue during a simple migration process to create a view. Despite success in migrating up, I faced an error when attempting to migrate down. ERROR: Could not migrate down 20220620114132 ...

javascriptnode.jsmongodbmigrate-mongo

Mapping an array in ReactJS based on the specific order of another array

In my experience with Unmitigated, the answer proved beneficial. If you're arriving from a Google search, please scroll down for more information. Order: [ "567", "645", "852", "645", "852", "852 ...

javascripthtmlreactjsarraysreact-hooks

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

not getting any notifications from PHP

Despite receiving a status of '1' from this process file, my JavaScript code seems to be working fine. However, I am facing an issue with not receiving the email. <?php //Retrieve form data. //GET - user submitted data using AJAX //POST - in ...

phpjavascriptajax

Using jQuery UI tabs with AJAX responseData

I have a collection of items labeled A, each containing a subset of items called B. The presentation of the B items within A is designed to appear as tabs using jQuery UI tabs. To display the list of A items on a page, I utilize a controller, and then load ...

phpjqueryajaxjquery-uijquery-ui-tabs

Resetting several sticky titles after displaying and hiding elements

Inspired by a popular codepen example, I have successfully implemented sticky titles in my sidebar. However, when integrating these sticky titles with the functionality to show/hide related items on click, I encountered some unexpected issues. The code sni ...

javascriptjqueryhtmlcsssticky

Console displaying a 400 bad request error for an HTTP PUT request

I'm currently in the process of developing a react CRUD application using Strapi as the REST API. Everything is working smoothly with the GET, DELETE, and CREATE requests, but I encounter a 400 bad request error when attempting to make a PUT request. ...

javascriptreactjsmaterial-uiredux-toolkitstrapi

What is the best way to turn off autocorrect in a textarea on IE11 without turning off spellcheck?

In my experience, disabling the spellcheck attribute seems to solve the auto-correct issue, but it also eliminates the underlining of misspelled words. <textarea id="TextArea1" spellcheck="false"></textarea> I prefer to keep spellcheck enabl ...

javascripthtmlinternet-explorer