Coloring the table upon selecting a checkbox using AJAX, JavaScript, and JSP

How can I adjust the color of the entire table (every row of the table)? Currently, I can only change the color of the first row of my table.

Here is my color function in JSP:

function changeColor(rowID){
        var row = document.getElementById(rowID);

        var alternateRow = document.getElementById(rowID +'_alt');  
    if(row!=null){
        if(row.style.backgroundColor == '' || row.style.backgroundColor == '#ffffff'){
            row.style.backgroundColor = "#009966";
            return;
        }
        if(row.style.backgroundColor == '#009966'){
            row.style.backgroundColor = "#ffffff";
            return;
        }    
    }
    if(alternateRow!=null){     
        if(alternateRow.style.backgroundColor == '' || alternateRow.style.backgroundColor == '#ffffff'){
            alternateRow.style.backgroundColor = "#009966";
            return;
        }
        if(alternateRow.style.backgroundColor == '#009966'){
            alternateRow.style.backgroundColor = "#ffffff";
            return;
        }
    }
}

Answer №1

Consider the following HTML structure:

<input id="demo" type="checkbox" name="example" />Greetings Earthlings

Implement this functionality using jQuery:

$("#demo").click(function() {     
   if ($(this).is(':checked'))
    {
        $('tr').css("background-color", "blue");
    }
});

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

Ways to display form choices that are influenced by other form selections

In my form, the user is supposed to choose a specific item at the end. As they fill in the initial options, the subsequent fields below change dynamically. Here is an example: Type: { t1:{ Number of X:{ 1:{...} 2:{...} ...

Issue with referencing Asmx web service

I am struggling to properly reference my web service method with JavaScript on my client page. I keep receiving an error message that says "CalendarHandler is not defined". <%@ WebService Language="C#" CodeBehind="~/App_Code/CalendarHandler.cs" Class ...

Encountering an error "[$rootScope:inprog]" while using Angular select with ngModel

I'm still learning my way around Angular, but I have a basic understanding. Right now, I'm working on assigning access points to a building using a <select> element. I've created a simple controller for this task, but it's not fun ...

Steps for triggering a logout using MSAL2Provider

Currently, I am incorporating the React Login Microsoft-Graph-Toolkit component (shown in the code snippet below) along with MSAL2Provider to facilitate user login functionality in my Active Directory application. Although this setup is functioning smoothl ...

Jackson is unable to deserialize an empty array

Currently, I am analyzing the Facebook Insights data and attempting to map the JSON to an Object named Jackson. I have successfully handled scenarios where all the data is present, but I am facing an issue when trying to deserialize an empty array of key-v ...

Pass a Json object as a parameter to a Web Api controller in a .NET Core application

This code snippet utilizes Google API with Javascript var output = new Object(); output.PlaceID = place.place_id; output.Longitude = place.geometry.location.lng(); output.Latitude = place.geometry.location.lat(); $.ajax({ headers: { 'Acc ...

Trapped in the Web of Facebook OAuth

I've been struggling with this issue for a day now and I can't seem to pinpoint where I'm going wrong. I have experience working with JavaScript on the client side and recently started following a book tutorial. However, it appears that Face ...

`vuetify sidebar with a nested menu``

I am trying to enhance the vuetify sidebar menu I created by adding a submenu to a specific title. Despite editing the code and data as shown below, I am unable to see any changes reflected. Below is the code snippet: <v-list flat class="mt- ...

Tips for effectively engaging with a Component's aggregationUnleash the full potential of

After configuring an aggregation for my Component, here is what it looks like: aggregations : { busyDialog : { type: "sap.m.BusyDialog", multiple: false } } The aggregation is named ...

Event triggered only upon initial click

I am experiencing an issue with my category list. When I click on a category to trigger an AJAX request for the first time, the request does not go through. However, when I click on the same category a second time, it works perfectly. Below is the code sni ...

Handling Datatable: Executing an asynchronous function post an Ajax request

Upon receiving data from the web server, I want to manipulate it in Datatable. However, the response data is encoded and requires decoding using an asynchronous function called decodeData(). I attempted to call this async function in the dataSrc section as ...

Utilizing local storage to retain column resize settings in PrimeNG

I am currently working on implementing the order, toggle, and resize (Fit Mode) features on a primeng table. So far, I have managed to update the selectedColumns array for order and toggle, allowing me to save the current user settings. My issue lies with ...

Transferring data from the server side using ejs to Ajax

I have designed a table that showcases data fetched from the server side for administrator approval. https://i.stack.imgur.com/mzDVo.png In my project, I am utilizing MongoDB, NodeJS, and Express with an EJS view. However, I stumbled upon an issue while ...

Tips for transferring array values to PHP through AJAX?

I am attempting to send data to the database via AJAX. I have an array with values that need to be passed to PHP using AJAX in order to display related records. <form id="search-form" method="POST"> <input value="4869" name="compare_id[]" type= ...

Experiencing difficulties with NPM installation

Screenshot of my terminal in VSCode Despite attempting to uninstall and reinstall node and clearing the cache, I am still unable to resolve this issue. Any suggestions? If it's relevant, I am using Windows 10. ...

Placing an eye icon on the password input field for optimal visibility and positioning

I am currently working on a Node.js project and I am attempting to incorporate an eye icon using Bootstrap into the password input field for visibility. Below is the code snippet of my input field: <div class="container"> <form ...

What is the reason for not encountering an error when reading an array beyond its index limit?

Recently, while working on a pre-existing website with JavaScript code, I made an interesting discovery. I noticed that the code was accessing array items in a unique way: var value = myArray[0, 1]; This seems to be retrieving the second item of the arr ...

"Unlocking the Potential: Maximizing the Benefits of the top.gg Vote Web

My bot has been verified on top.gg, and I'm looking to offer rewards to users who vote for my bot. How can I detect when someone votes for my bot, get their ID, check if it's the weekend, and take action after the vote? Essentially, how do I util ...

The console is displaying a state that has not been updated in the Redux reducer yet

I am currently facing a puzzling issue that I can't quite pinpoint whether it's related to Chrome console, Redux, or JavaScript objects. Within my React + Redux application, I have the following function: function InputReducer(state = [{ }], ac ...

Scale transformation - I am aiming for it to exceed the limits, yet it remains contained within

Currently, I am working on enhancing my carousel by implementing a zoom effect when hovering over the images. However, I have encountered an issue where the image gets hidden within the div container and doesn't overflow as expected. I tried adjusting ...