Using jQuery to change the background color of table cells to various shades

Question

Using jQuery to change the background color of table cells to various shades

I am seeking assistance with a table I have created, and I want to implement a feature where the background color of cells with prices will change when clicked (using addClass(on)). The goal is to also change the background color of surrounding cells (using addClass(off)) while ensuring that cells with text and different colors remain unaffected.

In addition, I would like to retrieve the ID of the row to which the clicked cell belongs. Below is an example structure of a row:

<tr class="taksit" id="tek">
    <td><b>Tek Çekim</b></td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
    <td><?=$sontutar?> TL</td>
</tr>

I have attempted various methods suggested here but have not been successful in implementing this functionality. Any suggestions on how to achieve this desired outcome?

jquery css

Answer 1

Answer №1


$(document).ready(function() {
    $('table#specificID tbody td').on('click', function() {
        $(this).closest('tbody').find('td').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 2


$(document).ready(function() {
    $('table#specificID tbody td').on('click', function() {
        $(this).closest('tbody').find('td').removeClass('active');
        $(this).addClass('active');
    });
});

Answer 3

Answer №2

$(".clickable-td").on('click',function(){
  // store the clicked element
  var selectedElement = $(this);

  // remove background color from other clickable elements 
  $(".clickable-td").css('background','none');

  // change the background color of the clicked <td>    
  selectedElement.css('background','blue');

  var rowIdentifier = selectedElement.closest('tr').attr('id');
});

Let me elaborate on my approach here.
Initially, to target specific <td> elements for click events and background modifications, it's practical to assign a common class like "clickable-td". Alternatively, you could designate an exclusion class such as "noClick" for your requirements.

For adjusting the <td> background color, numerous methods can be utilized. In this demonstration, the straightforward .css('background','blue'); was implemented, but in actuality, more intricate logic may be advisable.

The rowIdentifier is obtained by examining the nearest ancestor that is a <tr> with the assistance of the closest() function, followed by inspecting the id attribute.

Answer 4

$(".clickable-td").on('click',function(){
  // store the clicked element
  var selectedElement = $(this);

  // remove background color from other clickable elements 
  $(".clickable-td").css('background','none');

  // change the background color of the clicked <td>    
  selectedElement.css('background','blue');

  var rowIdentifier = selectedElement.closest('tr').attr('id');
});

Let me elaborate on my approach here.
Initially, to target specific <td> elements for click events and background modifications, it's practical to assign a common class like "clickable-td". Alternatively, you could designate an exclusion class such as "noClick" for your requirements.

For adjusting the <td> background color, numerous methods can be utilized. In this demonstration, the straightforward .css('background','blue'); was implemented, but in actuality, more intricate logic may be advisable.

The rowIdentifier is obtained by examining the nearest ancestor that is a <tr> with the assistance of the closest() function, followed by inspecting the id attribute.

Using jQuery to change the background color of table cells to various shades

Answer №1

Answer №2

Similar questions

The property value for -webkit-overflow-scrolling: touch is not valid

Implementing Cross-Origin Resource Sharing (CORS) authentication on Internet Explorer with

Is there a way to display a Bootstrap popover for a button when another button is clicked?

What is the best way to modify the underline style of a tab in Material UI?

Instruments for crafting an application compatible with a wide range of web browsers

Vue application experiences issues with styles not displaying as expected

The div extends beyond its parent due to its height

Showing both labels and input fields side by side with CSS developments

What is the best way to showcase my divs in a masonry layout using flexbox?

What causes the source code of a website to change when accessed from various browsers?

Failure of AJAX HTML function to retrieve value from textarea

Passing an array to PHP using AJAX

Ways to eliminate a Collection of CSS2DObject from the environment

Learning how to update a database using AJAX, jQuery, PHP, and MySQL can greatly enhance your web development

Why won't divs align vertically in the center?

Having difficulty positioning menu items beside the logo

Using the :not() selector in complex JQuery statements

Include a character on the right side without shifting the text to the left

Align a span vertically within a div

Creating a Form with Dynamic HTML when Button is Clicked