1

i have the following jquery code to format a html table.

   $(".jtable td").each(function() {
       $(this).addClass("ui-widget-content");
   });

i want (one on table) to change the text color to blue (its black in the ui-widget-content class. i tried doing this below but it didn't seem to do anything.

Any help on override some particular css for one table (and i want to leave the other tables alone)

   $(".jtable td").each(function() {
       $(this).addClass("ui-widget-content");
       $(this).css("color", "Blue");
   });
leora
  • 188,729
  • 360
  • 878
  • 1,366
  • 2
    Works for me (http://jsbin.com/ofica3/edit). The problem is elsewhere. – Max Shawabkeh Apr 25 '10 at 17:33
  • 2
    You don't need to use `each`. Both `addClass` and `css` will operate on all matched elements. `$(".jtable td").addClass('ui-widget-content').css('color', 'blue');` *(this won't fix your problem, just for future reference)*. – Matt Apr 25 '10 at 17:47

4 Answers4

1

That selector:

$(".jtable td")

Selects a table-cell that's a descendant of an element of class 'jtable'.

What you're presumably trying to do is select a table with that class:

$('table.jtable')

This will, of course, select all tables of that class. So you'd need to be able to uniquely identify the table you want to select/address. If it's the first table:

$('table.jtable').filter(':first')

Otherwise you'd likely have to apply an id to the one you want to modify.

David Thomas
  • 249,100
  • 51
  • 377
  • 410
0

Try the !important tool

$(this).css("color", "Blue !important");

http://www.electrictoolbox.com/using-important-css/

Alternatively, just make another class that has the color already set to blue, and apply that class instead.

Tim
  • 6,986
  • 8
  • 38
  • 57
  • 1
    jQuery doesn't understand the `!important` css-rule. See: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles for alternatives that'll allow `!important` to be used. – David Thomas Apr 25 '10 at 17:36
  • 1
    the $(this).css() applies to element directly and in most cases does not need !important keyword. – Alexar Apr 25 '10 at 17:40
0

A style set with jQuery's css() command should override a style coming from a class, unless the latter has the !important keyword. So something like

$(".jtable td").addClass("ui-widget-content");
$(".jtable:first td").css("color", "Blue");

should suffice (of course :first should be replaced with whatever selector you want). If "ui-widget-content" only sets the text style, you can add it to the table instead of each cell (they will still get it through CSS inheritance rules) which is both faster and more concise:

$(".jtable").addClass("ui-widget-content").find(":first").css("color", "Blue");
Tgr
  • 27,442
  • 12
  • 81
  • 118
-1

$("tr:odd").css("background-color", "blue");

Also try looking into .odd and .even selectors if you want to alternate table row colours -

http://api.jquery.com/odd-selector/

Tim
  • 6,986
  • 8
  • 38
  • 57