Tips for altering the color of a specific row in JQuery by targeting its unique id

I've been struggling to accomplish a simple task using Jquery and CSS, but I seem to be stuck.

My issue involves making an ajax request to update a PostgreSQL table and retrieve an id in return. This id corresponds to the id of a row in a previously defined table:

   $(document).ready(function(){
    var ajaxurl = 'requestsII/updateStatus.php'; // script to execute
    data =  {datastr:tr_id,datastr1:komvosName,datastr2:current_selection}; 
    $.post(ajaxurl, data, function (response) {
        var response = JSON.parse(response); 
        console.log(response);                              
        var id = response[0]['itemcode'];                                                    $("'#"+id+"'").css({backgroundColor: 'red'});
     });
 });

The goal is to change the color of the row with an id matching this value:

   var id = response[0]['itemcode'];    

I've experimented with different approaches, but it seems like I'm missing something in my implementation.

Answer №1

To apply styling with CSS:

$('#' + response[0]['itemcode']).css('background-color', 'green');

The highlighted components are unnecessary.

$("'#"+id+"'").css({backgroundColor: 'red'});
// ^     ^^^^

$("#" + id).css({backgroundColor: 'red'}); // Correction made

Additional resources: http://api.jquery.com/css/

Answer №2

To change the background color using jQuery, you can utilize the .css() method.

$('#' + id).css('backgroundColor', 'red');

Alternatively, it is recommended to use .addClass().

This function adds specific classes to each element within the set of selected elements.

CSS Code

<style>.YourCSSClass{background-color : red } </style>

JavaScript Code

$('#' + id).addClass('YourCSSClass');

Answer №3

basic:-

$('#' + result[0]['code']).css('background-color', 'blue');

Answer №4

this is the solution

$('#'+id).css({backgroundColor: 'yellow'});

give it a shot

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

Passing PHP value from a current page to a popup page externally: A guide

I'm currently facing an issue at work where there is a repetitive button and value based on the database. I need to extract the selected value from the current page into a pop-up page whenever the corresponding button is clicked throughout the repetit ...

What is the method for customizing the background color in a .vue file using Bootstrap?

Can anyone assist me in updating the background color of a div class from grey to white? The code is within a .vue file using Bootstrap and includes an enclosed SVG file. Here's the snippet: <div class="text-left my-3 bg-white"> <button var ...

Experience the Firefox nightmare with a fixed background-attachment!

I've been struggling with a puzzling issue all day, and I'm hoping that someone with more expertise can help me solve it. As I work on updating the design of my website, I've encountered what seems to be a bug specific to Firefox. I've ...

JavaScript/jQuery - dynamic name selector with animation

I've been working on developing a raffle ticket picking script using JS and jQuery. Initially, my script is functioning well. However, I am now looking to enhance its visual appeal so that it can be operated in assembly. In order to achieve this, I ...

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

Multipart Form Data Failing to Transmit Properly

I am facing issues getting this to work... The Technology Stack HTML5 CSS Bootstrap 3.x.x NodeJS (Express, multer) jQuery The Issue at Hand It seems like the post is being logged but the req.files object is not being populated and no images are being ...

Troubleshooting Report Viewer compatibility issues with ASP:Panel

My journey with VS reports is just beginning, and although I've managed to create the RDLC and set up the report viewer, I now face a problem. The report is configured to use a data source from an SP in the RDLC page. However, when I place the contro ...

Is it possible to insert an image directly into the <img> tag without having to first send it to the server?

I've created an upload form that allows users to submit images: <form> <input accept="image/jpeg, image/gif, image/png" type="file" name="image" id="image" class="UploadInput" onchange="submitImageUploaderForm()"/> </form> Once t ...

Duplicate an HTML document while excluding specific class div elements

If you want to duplicate your HTML file using jQuery, it can be done like this: alert($("html").clone().html()); My objective is to replicate the entire program while excluding divs with the class '.ignore', but so far I am only able to display ...

Avoid adding any empty entries to the list using jQuery

I have implemented a code to prevent any blank entries from being added to my list, and it seems to be working fine. However, I can't shake the feeling that there might be a better way to achieve this. Even though it functions correctly, it doesn&apos ...

Difficulty with the responsiveness of a website due to issues with the bootstrap grid system

I've been working with a Bootstrap grid that you can find at . While it works perfectly on large desktop screens, everything is a bit messy on mobile devices. The "NEW" text specifically is not visible on mobile and doesn't seem to be responsive. ...

Arranging Bootstrap buttons in a clean row

How can I add two nav buttons "register" and "sign in" to the top right of my navigation bar, and include a separate button "request a demo" below them without displacing the first two buttons? I am currently using a br tag to push the third button down ...

From JSON to PNG in one simple step with Fabric.js

I am looking for a way to generate PNG thumbnails from saved stringified JSON data obtained from fabric.js. Currently, I store the JSON data in a database after saving it from the canvas. However, now I want to create a gallery of PNG thumbnails using thi ...

Guide to submitting a form with an image upon pressing a button

I am working with the following HTML structure: <form id="form" enctype="multipart/form-data"> <div class="row"> <div class="col"> <div class="mb-3"> ...

Tips for managing multiple events within a single component in Angular 4

Currently, I am working on developing a user interface layer for an application using Angular 4. The page layout I have consists of displaying data in tables based on search criteria. At the moment, I have code that displays the data in one HTML file (rec ...

Error encountered during the construction of the dojo due to a CSS syntax

I am currently using version 1.9.3 of dojo, and I have encountered an issue with the css file when trying to build dojo using build.bat. The code in my css file is as follows: @import url("TimeDriverCommon.css"); @import url("DialogCommon.css"); @import ...

If the width of the table is set to 100% in the CSS, the legend in the Flot chart will automatically shift to the

When the CSS for the table is set to { width:100%}, the Flot chart's legend moves to the left side. Is there any way to maintain the table { width:100%} while also preventing this shift, considering that the CSS is applied site-wide? Here is a jsfid ...

Caching JSON Results in ASP .Net MVC 5

Can someone help me understand how to implement caching for JsonResult actions in an MVC 5 application? I am looking to cache certain actions that are called via AJAX using the [OutputCache()] attribute. Some of these actions return an ActionResult with HT ...

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

Can Microsoft Bot Framework chat window support rounded border corners?

Is it possible to style border corners in the Microsoft bot framework? I've attempted the following: const styleSet = window.WebChat.createStyleSet({ botAvatarImage: '/assets/logo.png', bubbleBackground: ...