Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS.

.profile tr:nth-child(odd)    { background:#eee; }
.profile tr:nth-child(even)    { background:none; }

However, I now want to allow users to select a row and have it highlighted in yellow using JQuery.

$(".Select").click(function() {
    //Deselect all other Rows
    $(".Select").show().prev().hide().parent().parent().css('background', 'none');

    //get Id
    var Row = $(this).parent().parent();
    var MatchId = Row.attr('id');
    $(this).hide().prev().show();
    Row.css('background', '#FFFFBA');
});

The issue arises when selecting all rows with the $(".select")....parent().parent().css('background....

Setting it to "none" turns all rows white and disrupts the alternating color scheme. Is there a way to restore the background property to its original state?

jquerycssbackground-color

Answer №1

Introduce a new category:

.profile tr.hover    { background:#FFFFBA; }

instead of

 Row.css('background', '#FFFFBA');

you can opt for

  Row.addClass("hover");

and in place of

  $(".Select").s.//.parent().css('background', 'none');

you should go for 

  $(".Select").s.//.parent().removeClass("hover");

The // is simply used to abbreviate the lengthy line.

Answer №2

Don't stress over it, simply utilize the CSS selector for the TR in your .css stylesheet and incorporate the :hover markup to let the browser take care of it. It's best to delegate tasks to the underlying browser whenever possible.

However, based on your code, it seems like you might actually want to change the background of a different row than the one you're currently on. In that case, you will need to add some .data() to the target object and trigger a mouse out event to revert it back to its original state.

Answer №3

Display the element with the class "Select", hide the previous element, and change the background color of its parent's parent element to transparent.

Answer №4

Caspar's explanation is spot on for a number of reasons:

  1. By keeping your presentation in the CSS, you maintain separation of concerns.
  2. Browsers are optimized to apply CSS styles more efficiently than manipulating the style object with JavaScript.
  3. If you want to add additional styles to the highlighted item, there will be no performance impact thanks to reason 2.

However, if you prefer to stick with your current code, you can achieve the desired result by excluding odd rows from your jQuery selector using the $.not() method:

$(".Select").show().prev().hide().parent().parent().not(':nth-child(odd)').css('background', 'none');

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 hovering over a specific element within a group of similar elements using jQuery

Hi there! I recently started exploring Js and jQuery, and I was able to create a cool width change animation on a div when hovering over another. However, I ran into an issue when trying to implement this with multiple sets of similar divs. Whenever I hove ...

javascriptjqueryhtmlcss

The error handler in AngularJS $http service is always left wanting for a call

Here's the code snippet I'm currently using: $http .post('/api/login', $scope.user) .success(function (data, status, headers, config) { // code }) .error(function (data, status, headers, config) { // code }); It seems to be functi ...

javascriptjqueryajaxangularjsangularjs-service

Eliminate placeholder text when the tab key is pressed

I'm currently facing an issue with a textarea that has a placeholder and the Tab key functionality in Internet Explorer. I've included placeholder.js to make it work, but when I repeatedly press the tab key and focus on the textarea, the placehol ...

javascriptjqueryhtmlcss

JavaScript code must be tailored to reference a JS file based on the specific environment, whether it be Production, Development, or staging

I need to determine which .js file to refer based on the URL of Prod, Dev, and QA environments. For Production URLs (domain.com and www.domain.com), I should refer to prod.js file. For Dev and QA URLs (dev.domain.com and staging.com), I should refer to s ...

javascriptjqueryif-statementwindow.location

When combining Symfony, Twig, and Semantic UI, users may encounter an issue where the background image fails to display

Can someone assist me in identifying the issue with my code? I am using Symfony 2.8, Semantic UI, and Twig, attempting to set a background image on my site. The modification is being made to my base.html.twig file. I have attempted: Using different ima ...

htmlcsssymfonytwigbackground-image

I'm struggling to make background-image display properly in my CSS code

In my quest to enhance the appearance of my website, I've been grappling with getting the background-image property to cooperate in CSS for the past three days. It's frustrating because I've successfully implemented this feature before, but ...

htmlcss

Enhance the appearance of your Vuejs application with conditional style formatting

I want to enhance a basic table by applying conditional CSS styles to the cells based on their values. For example: If area1 == 'one', then assign the td-one CSS style. <tr v-for="version in versions" :key="version.id"> < ...

javascripthtmlcssvue.jsvuejs2

Increasing the div's size to exceed the dimensions of the screen

My issue pertains to the background image on my website. I have set a background image for the body and centered it horizontally. Each page includes a paragraph below the header, each with a different size, causing scrolling. The problem is that the backgr ...

htmlcss

Guide on how to retrieve a list of objects from a controller and showcase them utilizing JQuery in a Spring MVC application with ajax functionality

Here is the controller code snippet: @Controller public class MainController { @Autowired SqlSession sqlSession; @Autowired Message messageVO; @RequestMapping(value="getMessages", method=RequestMethod.GET) public @ResponseBody List<Messag ...

javascriptjqueryjsonajaxspring

Issues with slow scrolling and sticky sidebar on websites with infinite scrolling feature

My webpage has a sidebar that is supposed to scroll down with the page. However, I am experiencing some lagging issues where the sidebar appears a few seconds after scrolling. Additionally, the sidebar keeps moving downwards, making the page longer and cau ...

javascriptjquerysticky

Sharing a website link within Jquery and Ajax as a variable

Looking to dynamically load a collection of links on a page without writing out long statements for each one? Simply extract the URL from the attribute and pass it where needed. The code snippet below will demonstrate how to fetch the content using AJAX. ...

jqueryajax

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the ...

cssreactjssass

Stop the back button from working on a jQuery Mobile webpage

I'm currently developing a project using jQuery mobile and I need to restrict the user from navigating back to certain pages. While the UI does not have a back button in these instances, I am facing an issue when the user clicks the browser's bac ...

jqueryjquery-mobile

Having trouble with the functionality of Bootstrap's nav-tabs 'show' feature?

I'm having some issues with adding a search box to my glossary. The glossary is created using nested unordered lists (ul) within another ul that has classes of "nav-tabs" and "bootstrap". In the JavaScript code, I am using the following snippet: $j(& ...

javascriptjqueryhtmlcsstwitter-bootstrap

The difference between see-through shades and rgba(0,0,0,0)

What are the primary benefits of using: background-color: rgba(0,0,0,0); over: background-color: transparent; ? ...

css

Having trouble getting CSS absolute and relative positioning to work with my div slider carousel

I'm currently working on creating a slider carousel using VUE, where the CSS classes (3 divs) are looped through. However, I am facing an issue where every time a div fades out, the next slider creates a duplicate slider at the bottom, resulting in tw ...

javascripthtmlcssvue.jsvue-component

The contents table remains fixed in the top right corner as you scroll

I have developed an Angular app with a table-of-contents component that only displays two items. The code for the script is as follows: ts import { Component, OnInit } from '@angular/core'; import { pdfDefaultOptions } from 'ngx-extended-p ...

htmlcssangulartypescriptbootstrap-4

Aligning columns next to one another using flexbox in a centered manner

I am attempting to create a layout with 3 columns, but I want any extra columns beyond a multiple of 3 to be centered instead of aligned left. While I have made progress, the issue I'm facing is that the additional columns are not centered relative t ...

htmlcssflexbox

What is the best way to combine items from two separate lists into a single list by simply clicking on the items using JavaScript and PHP?

Having encountered some issues with setting up a list of items and moving them between each other, I was wondering if it is possible to have multiple lists with a link inside each item that allows for moving it to a specified list. For example, having a li ...

phpjqueryhtmlcsslist

How to position an absolute element beneath a fixed element

My website is experiencing a problem where the fixed header is overlapping an absolute paragraph on this page. Does anyone know how to resolve this issue? ...

javascripthtmlcss