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?

Answer 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').