Modify the background color of a particular TD element when clicking a button using JavaScript and AJAX

When I click on the "Active account" button inside the designated td with the <tr id="tr_color" >, I want the value "1" to be added to the 'active_account' column in the database. I have been successful with this functionality. However, I am facing an issue where the background color of the td is not changing to blue as expected.

JavaScript

<script type="text/javascript">
function active_user_account() {
    jQuery.ajax({
        url: "check_data.php",
        data:'conf_data='+ document.getElementById( "active_account" ).value + '&id='+ document.getElementById( "id_this_user" ).value,
        type: "POST",
        success:function(data){
            document.getElementById("tr_color").style.backgroundColor = "blue !important";
        },
        error:function (){}
    });
}
</script>
javascriptjqueryhtmlcssajax

Answer №1

To include !important in dynamically added styles using JavaScript, you can modify the code like this:

document.getElementById("tr_color").style.backgroundColor = "blue";

By making this change, the style should now be applied with the necessary importance. Another approach would be to apply the importance using a class:

document.getElementById("tr_color").className += " importantClass";

Then, define the following CSS rule for the class:

.importantClass { background-color: blue !important; }

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

How to create a looping animation effect for a div using CSS on hover

Using Bootstrap framework with Wordpress site .test { position: absolute; z-index: 9; left: 50%; height: 10em; width: 10em; margin-left: -5em; background-size: cover; opacity: 0; transition: opacity 0.5s ease; transform: translateY(- ...

javascriptjqueryhtmlcss

Having Trouble with Jquery UI Autocomplete and JSON Integration

Hi everyone, I'm currently investigating why the autocomplete() method is not performing a GET request when I append a variable to the end of the source URL. Here's an example: <script> $(document).ready(function(){ var se ...

jqueryajaxjsonjquery-uijquery-ui-autocomplete

Tips for inheriting and overriding controller methods in AngularJS with Java as the base language:

I have a simple controller and I want to create a new controller that is very similar to it, but without copying too much code. angular.module('test').controller('parentController', parentController); parentController.$inject = [' ...

javascriptjavaangularjs

Create a personalized edit button for ContentTools with a unique design

I'm struggling to figure out how to customize the appearance and location of the edit button in ContentTools, a wysiwyg editor. After some research, I learned that I can use editor.start(); and editor.stop(); to trigger page editing. However, I want ...

javascriptphpjquerycontent-management-systemwysiwyg

Aligning a element at the center is not functioning properly when using margin: 0 auto;

I'm having trouble aligning elements to the center when applying margin: 0 auto. You can view the code here: https://jsfiddle.net/helloworld123/vhhx1o7n/ The goal is to align the elements in the center of the page (.entry-wrap should be centered) and ...

css

Pagination Bug: Index Incorrectly Grabbed Upon Navigating to Next Pages

I encountered an issue with my paginated article list (105 articles with 10 per page). Everything works fine on the first page, but when I click on an article from page 2 onwards, it takes me to the index of the very first article in the array. <div cla ...

javascriptvue.js

What is the best way to refresh the slick jQuery plugin for sliders and carousels?

I am currently facing an issue with two buttons that have the same function. The purpose of these buttons is to retrieve data from an API, convert it to HTML, and then append it to a <div> using jQuery. Finally, the data is displayed using the slick ...

javascriptjqueryhtmlslider

The class name is not defined for a certain child element in the icon creation function

Currently, I am developing a Vue2 web application using Leaflet and marker-cluster. I am encountering an issue with the iconCreateFunction option in my template: <v-marker-cluster :options="{ iconCreateFunction: iconCreateClsPrg}"> ...

javascriptvue.jsvuejs2leafletleaflet.markercluster

Filtering a collection using another collection in Backbone: tips and tricks

I am managing two distinct collections: Collection X includes element1, element2, element3, element4. Collection Y consists of element2, element3. For illustration purposes: var element1 = new models.ExModel({id: "1", name: "element1"}); var elemen ...

javascriptbackbone.jsunderscore.js

Troubleshooting problem with infinite scrolling in AngularJS with Ionic framework

I recently created a webpage with an infinite scroll page load more script using Ionic AngularJS. However, I encountered an issue where the page restarts from the beginning once it reaches the bottom. Below is the HTML code snippet: <ion-content class ...

javascriptjqueryhtmlcssangularjs

What is the best way to position a Button on the far right of an MUI AppBar?

I'm struggling to grasp the concept of aligning items in MUI. Here is my code snippet: class SignUpForm extends React.Component { render() { return ( <Button sx={{ justifyContent: "flex-end" }} colo ...

cssreactjsmaterial-ui

Using JQuery to Dynamically Add Elements with JSON

I am working with a JSON variable called myCollection, and its structure is as follows: var myCollection = { "data": [ { "name":"Joe", "id":"1" }, { "name":"Bill", "id":"2" }, { "name":"Dave", "id":"3" } ] }; Recently, I encountered an is ...

jqueryjson

A preselected default option determined by your geographical location in an HTML document

After searching extensively for a solution, I've found this to be quite challenging... In my website's HTML page, there is a dropdown menu containing all the countries. <option value="AF">Afghanistan</option> <option value="AX"&g ...

html

What is the reason for the background image not appearing while utilizing a bootstrap template designed for it?

I recently started working on an asp.net application and decided to integrate a pre-made bootstrap template for the frontend. After some searching, I came across this one. The original site showcasing the template looked really appealing with a background ...

htmlcssbootstrap-4

php file_get_contents() method not fetching any data

Currently, I am facing a challenge with PDF'ing a page that typically uses AJAX to display the cart/basket content. My goal is to generate a PDF of the page and send it via email with the included cart/basket items. However, during the PDF conversio ...

phpajaxcurlfile-get-contents

Response with a JSON arraylist is returned

I am relatively new to JSON and jQuery, and I am trying to retrieve JSON data using AJAX. My goal is to display this data upon clicking a submit button. Here is the code snippet that I attempted: PrintWriter out = response.getWriter(); List<Countries&g ...

javaajaxjson

Typescript interface design for nested objects in a hierarchical structure

When data is received from the server in JSON format, it typically looks like the example below (details have been modified): { "apple": { "fruitName": "apple", "types": { "greenApple": { ...

javascripttypescriptoopinterfacetypescript-generics

Using Ruby on Rails to incorporate AJAX for posting and commenting functionality

Could use some assistance with implementing AJAX into my project. It seems like it should be a simple task, but I've been struggling with it for days. My goal is to have new comments appear without the need to reload the page. Below are references to ...

javascriptruby-on-railsrubyajax

Having trouble getting the CSS animation to work properly with the text

Update: The direct link is working fine, unlike the rocketscript version. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> I have been attempting to animate word rotati ...

javascriptjqueryhtmlcss

What is preventing the console from displaying [Object] instead of my information?

Looking to add a meme command to my Discord bot using data stored in a JSON file called memes.json. In my index.js file, I have a variable set up to retrieve the data as follows: const meme = require("./memes.json"). However, when trying to embed the meme ...

javascriptnode.jsdiscord.js