Overriding css with jquery/javascript
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?
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') .
Try
this.style.cssText = "border: 1px solid red !important";
or
$('#table_1 tr:last td').css('border', '1px solid black !important');
上一篇: 创建一个二