Overriding css with jquery/javascript

Question

I have a table whose border is set as 1px solid silver from an external style sheet(some .css file). I have no control over this file.

This is the css: 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; }

Now I want to change the border color of the last row in the table to black. Im trying to use the following jQuery statement for this.

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

But this does not seem to work. How can I do this with JQuery/JavaScript?

Gert Grenander · Accepted Answer · 2010-07-13 23:12:18Z

1

If it's the TDs you're after, you need to address them:

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

This code will wait for the DOM to be ready and then apply the border on the TDs in the last row.

Edit: Seeing your CSS declaration, you need to make the style more specific. Here's how (with the class name):

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

If worse comes to worse, go for $('table.my_table > tbody tr:last td').

edited Jul 13, 2010 at 23:12

answered Jul 13, 2010 at 22:39

Gert Grenander

17.1k6 gold badges42 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

user343409 Over a year ago

Something strange happens when I do this: The bottom border only becomes black. Other borders are still silver. But when I use 2px solid black, that gets applied to all borders. Not really sure why this happens.

Gert Grenander Over a year ago

Sounds strange. Would you mind posting the code? Do you have anything else in the table?

user343409 Over a year ago

Sorry Gert. Your answer is very useful. I did not mean to downvote. Im very new to this forum and I was playing around and that became a downvote. Im trying to undo that. Apologies once again!

user343409 Over a year ago

This is my css: .my_table tbody td { font: 8.5pt verdana, sans-serif; border-left: solid 1px black; border-right: solid 1px black; border-top: solid 1px silver; border-bottom: solid 1px silver; overflow: hidden; padding: 0px 3px 0px 2px; } My table is very simple. Just has 2 columns and 15 rows. No other javascript/jquery features. 'my_table' is the class for the table. Basically last column has grandtotal and has to be prominent. So I want a black border for it. I now use the jquery code you provided

George Marian Over a year ago

@user343409 Update your question with the CSS and use the code formatting feature. It's much more readable that way.

|

planetsarecool · Accepted Answer · 2015-11-10 01:35:15Z

0

Try

this.style.cssText = "border: 1px solid red !important";

or

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

answered Nov 10, 2015 at 1:35

planetsarecool

273 bronze badges

Collectives™ on Stack Overflow

Overriding css with jquery/javascript

2 Answers 2

15 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related