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

Animate the CSS when the content is within the viewport using pagepiling.js integration

I'm currently working on animating content as it enters the viewport. However, I've encountered an issue where jQuery (used to check if the content is in the viewport) isn't functioning properly alongside pagepiling.js (). I suspect this mig ...

delaying the alteration of an image attribute following an AJAX call

After clicking on a button, a function is triggered (think of it as a published/unpublished button). Immediately after the function is activated, I change the element to display a loader gif. function updateStatus(event, status, element, data, action) { ...

Having trouble finding the dropdown generated by the jQuery plugin

In the process of developing an automation test script using C# and Selenium WebDriver, I encountered a challenge where I needed to click on two dropdowns consecutively. The HTML source code for the two dropdown elements is as follows: <select id="Ser ...

Can I use javascript/jquery to alter the direction of text in each line?

Looking for assistance with changing text direction on each new line. For instance: text left-to-right text right-to-left text left-to-right text right-to-left... etc. I would like the text direction to change with each word-wrap: break-word. Any help w ...

Having trouble fetching results from AJAX objects using vanilla JavaScript?

I am currently working on developing my own AJAX prototype without relying on jQuery or any other libraries. However, I am facing an issue where I cannot retrieve any results and the breakpoint set on a specific line is not triggering: The problem seems t ...

Error encountered when attempting to reinitialize DataTable while iterating through multiple tables and searching within tabs

Currently, I am utilizing DataTable to display 3 separate tables with the help of tabs, along with a search function. However, every time I load the page, I encounter a reinitialization error. Here is the snippet of my code: _datatables.forEa ...

Rails application experiencing difficulties in displaying the Raty JS plugin

Encountering issues with the raty js plugin while working on Rails version 5.0. jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined at jquery.raty.self-628421be ...

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

What exactly is the significance of "hash" in terms of Internet Explorer style

After downloading a sample CSS file, I noticed the following entry: #text-align: right; The comment beside the entry mentioned that this expression is specifically for justifying it in IE, while text-align: right; works for Safari and Chrome. My questi ...

Update the content of an HTML element without having direct access to the HTML code

I am currently in the process of creating a website using a website builder, and I am interested in customizing the default message that is displayed when a required field in the website form is left empty. The form in question is an integral part of the w ...

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

checkbox options based on user input

I'm currently working on converting a piece of code into a dynamic checkbox and could use some assistance. Any takers? <select id="genre" name="genre"> <option value="">-Select-</option> <sele ...

Ensure that the element is positioned above other elements, yet below the clickable area

Currently, I am working on developing a notification system that will display a small box in the top right corner of the screen. However, I am facing an issue where the area underneath the notification is not clickable. Is there a way to make this part o ...

Does setInterval consume a significant amount of CPU resources?

Recently, I came across an article stating that setInterval is considered to be CPU intensive. To verify this claim, I developed a script utilizing setInterval and closely monitored the CPU usage. Surprisingly, I did not observe any significant changes in ...

JavaScript Ajax request lags significantly in Internet Explorer, while it executes instantly in Firefox

So I have this jQuery .ajax() call set up to retrieve a List<string> of IP addresses from a specific subnet. I'm using a [WebMethod] on an .aspx page to handle the request and ASP.NET's JSON serializer to format the response for my Javascri ...

React App Showing Scrollbar When Material UI AppBar is Present

I'm encountering a straightforward issue in my React application. How can I get rid of the scrollbar on my page? It seems like the problem arises from the height value I set to 100vh. However, upon removing the AppBar, the scrollbar disappears. Any su ...

Error occurred when attempting to send a POST request to the server using AJAX and data did

When I try to send form data using a POST request via AJAX, I am encountering an issue. The data being sent seems complete when I console it in the AJAX call, but on the server side, parts of the object appear to be missing and the data is getting cut off. ...

Implementing a Popover Notification When Clicked

I'm a beginner at this. I came across an example of a popover message box in the link provided below. I attempted to implement it, but for some reason, it's not working. Could I be overlooking something? Alternatively, is there a simpler way to ...

Using the jQuery method `fadeToggle` to handle the functionality of multiple buttons toggling hidden text

I am struggling to make fadeToggle work properly. I want to reveal text when clicking on another div. Since I plan to use this for multiple elements, I am looking for a smart and efficient way to handle them all. Here is my current attempt which does not ...

Implementing the insertion of a <div> element within an input field using jQuery

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></scr ...