What is the method to alter the background color of a whole row in a data table once the checkbox has been checked using CSS in JSP?

Here is the JSP page code snippet:

<p:column selectionMode="multiple" exportable="false" style="text-align:center;">
</p:column>
  <p:ajax event="rowSelectCheckbox" update="deleteButton"/>
  <p:ajax event="rowUnselectCheckbox" update="deleteButton"/> 

I am currently experiencing an issue where the default background color is displaying as blue when I would like it to be gray instead.

Answer №1

In order to accomplish this, you will need to update the default ui-state-highlight style that gets added to the selected row (tr element).

ui-datatable-selectable.ui-state-highlight{
    background-color: gray
}

Answer №2

Appreciation to everyone for sharing their insightful responses.

I successfully made changes to the CSS tag "ui-state-highlight, ui-widget-content .ui-state-highlight, ui-widget-header .ui-state-highlight" and saw positive results.

<p:ajax event="rowSelectCheckbox" update="deleteEntry" 
rowClasses="ui-state-highlight, ui-widget-content .ui-state-highlight, ui-widget-header .ui-state-highlight" />

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

CSS Table - Content on the Right side extending beyond the browser boundaries

I've been facing a challenge while working on our company's website this morning. I have formatted the page into two cells, one on the right and one on the left. The cell on the right contains an image that is around 790 pixels wide. However, whe ...

Android device fails to show push notifications

Having difficulties with push notifications on Android. The notifications are being delivered and received, with the app icon showing in the status bar and the ability to view notifications by swiping down. However, there is no popup display. Any ideas o ...

The function of slidetoggle is malfunctioning when clicked

I currently have two dynamic containers with one displaying grouped boxes, quantities, and totals, while the other shows detailed information. Both container values are added dynamically at runtime. By default, the grouping container is displayed on the p ...

The functionality of the Ajax Toolkit Calendar appears to be malfunctioning

I have attempted to implement the ajax calendar extender, but unfortunately it is not functioning correctly. The code works with a different solution, however in this particular scenario it does not do anything. Here is my HTML code <ajaxToolkit:Too ...

Step-by-step guide on implementing a fade effect to a specific JavaScript element ID

When I click a button, the image on the screen disappears. I am looking to add a fade effect to this action. Can someone help me achieve this using CSS? #hide{-webkit-transition: all 1s ease-in-out;} For reference, here is a demo showcasing the current b ...

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

The attempt to invoke the action method through Ajax was unsuccessful

Here is the jQuery and Ajax code I am using: $('#submitSignUp').click(function () { var name = $('#name').val(); var email = $('#email').val(); var password = $('#password').val(); $.ajax({ ...

jQuery's callback handling often reverses the statement I just made

My current project involves using AJAX with jQuery to send a get request. Once the request is successful, I insert the response into a specific div: $.get("content.php", function(result) { $('#content').html(result); The content I'm fetc ...

What is causing my PHP script to handle NULL values when making an AJAX request?

I am facing an issue where PHP is returning NULL instead of the expected data when interacting with AJAX. Check out the relevant code snippets below: header.php <?php include_once("obtainData.php"); ?> <!DOCTYPE html> <html lang="es"&g ...

Display the JSON boolean value on the webpage using Ajax and Jquery

After using Ajax with a GET request to consume a REST web service, I now have the results displayed in my console. Here are some images related to the REST API I am consuming: https://i.sstatic.net/Nv7F7.png https://i.sstatic.net/OXhUg.png However, whe ...

How to perfectly position an image within a fixed full screen container

When you click on a thumbnail image, a full-screen overlay with a larger version of the image will be triggered using JavaScript. To ensure that the image is centered and resized inside the black overlay when the browser window size changes, I attempted t ...

Instantly Turn an Integer into Ice

I'm currently developing an application that involves numerous ImageButtons, where each touch event triggers the addition of a value to an Integer variable. One issue I am facing is when a specific statement returns true: if (x == y) Is there a way ...

JavaScript function not being executed after AJAX response in HTML

There seems to be a problem with my jQuery code. After receiving an html response from an ajax call and prepending it to a div, a div within that received html is not triggering a function in my external javascript file. In the index.php file, I have incl ...

How to alter the color of the chosen option in a select option control using ReactJS

Struggling to customize the text and background color of a control using ReactJS. Take a look at my code snippet: import React, { Component } from "react"; import "./Test.css"; class Test extends Component { render = () => { ...

Customizing CSS in apostrophe-cms Pro using TheAposPallete.vue

Just starting with apostrophe-pro and I've noticed a file named TheAposPallete.vue in the node_modules directory, located at \node_modules@apostrophecms-pro\palette\ui\apos\components This file contains the following CSS: ...

React: Modify the appearance of one component when hovering over another component

Currently, I am delving into the world of React and have come across a piece of code that successfully applies an opaque white overlay over an image when hovering over a button. This functionality is working as expected: class Product extends Component { ...

Guide on successfully selecting a hyperlink containing extra white-space at the end on a website

There are various links displayed on a website: Overview General Settings AR Server Settings Cache Settings Report Settings Web Service Settings Log Settings Change Password I am currently creating an automation script using Selenium in ...

Accordion elements that are active will move all other content on the page

I am currently working on creating an accordion using the following code: https://codepen.io/rafaelmollad/pen/JjRZbeW. However, I have encountered a problem where when clicking on one of the accordion items, the content expands and pushes the title upward. ...

Verify whether the date exceeds x days (only counting business days)

public class App { public static void main(String[] args) { final String cobDate = "2021-04-08"; final String recordDate = "2020-12-01"; } public static ZonedDateTime getDate(String date, DateTimeFormatter ...

What could be causing the incorrect value of the endpoint of an element when utilizing a function?

By adding angles individually and then using ttheta (without calling a function to add angles and then using ttheta), the problem is resolved. However, can anyone explain why using a function here is incorrect or identify the issue that this function is ca ...