Replacing CSS using jQuery/JavaScript

Question

Replacing CSS using jQuery/JavaScript

Recently, I encountered a challenge with a table that had its border set as 1px solid silver from an external style sheet (a .css file over which I had no control).

The CSS code responsible for styling the table was as follows: my_table tbody td { font: 8.5pt verdana, sans-serif; border-top: solid 1px silver; border-bottom: solid 1px silver; overflow: hidden; padding: 0px 3px 0px 2px; }

My goal was to change the border color of the last row in the table to black using jQuery. The approach I initially took was this:

$('#table_1 tr:last').css('border', '1px solid black');

Unfortunately, this method did not yield the desired result. So, my question now is: How can I achieve this using JQuery or JavaScript?

javascript jquery css stylesheet

Answer 1

Answer №1

To achieve the desired effect on the TDs, you must focus on them specifically:

$(document).ready(function(){
  $('#table_1 tr:last td').css('border', '1px solid black');
});

This script will wait for the document to be fully loaded before adding a border to the TD elements in the last row.

Update: Considering your CSS syntax, it is recommended to enhance the specificity of the styling. Here's how (using the class name):

$(document).ready(function(){
  $('.my_table > tbody tr:last td').css('border', '1px solid black');
});

If all else fails, you can try

$('table.my_table > tbody tr:last td')

.

Answer 2

To achieve the desired effect on the TDs, you must focus on them specifically:

$(document).ready(function(){
  $('#table_1 tr:last td').css('border', '1px solid black');
});

This script will wait for the document to be fully loaded before adding a border to the TD elements in the last row.

Update: Considering your CSS syntax, it is recommended to enhance the specificity of the styling. Here's how (using the class name):

$(document).ready(function(){
  $('.my_table > tbody tr:last td').css('border', '1px solid black');
});

If all else fails, you can try

$('table.my_table > tbody tr:last td')

.

Answer 3

Answer №2

Experiment

this.style.cssText = "border: 2px solid blue !important";

or

$('#table_2 tr:last-child td').css('border', '2px solid green !important');

Answer 4

Experiment

this.style.cssText = "border: 2px solid blue !important";

or

$('#table_2 tr:last-child td').css('border', '2px solid green !important');

Replacing CSS using jQuery/JavaScript

Answer №1

Answer №2

Similar questions

Transfer information from one Angular JS page to another pager based on ID

jinja2.exceptions.TemplateSyntaxError: instead of 'static', a ',' was expected

Retrieving data from Firebase using JavaScript to extract object details

Create an event listener for clicking on an image that potentially has a corner ribbon obscuring a portion of it

Chrome not responding to ajax call

What happens to top level data in Handlebars templates when using #each loop?

Best practices for outputting objects within an array using jQuery and JavaScript

Issue with editing JavaScript and HTML code

Alter the text color once the halfway point is reached at an angle of 175 degrees

A guide on extracting XML elements containing periods using JavaScript/extJS

Personalizing plot choices in highchart visuals

Select a single option from the group to include in the array

Searching for row/column labels within a screen showcasing numerous tables

Turn off Jquery Mobile Ajax Navigation

The syntax for importing JSON in JavaScript ES6 is incredibly straightforward and

What could be causing the element.style.FontSize to not be effective on classes that have been looped through and stored in an array created with querySelectorAll beforehand?

Error: the function document.title is not defined and cannot be executed, occurring on line 31

Is this HTML/CSS navigation bar code suitable for IE7 and tablet compatibility?

Error: jwt_decode function has not been declared

Clicking on an anchor tag will open a div and change the background color