Complex table - Target specific <TR>

Question

I've got a complex table which actually produces a very simple layout. For many reasons I cant change the HTML output so I'm trying something in jquery:

<div id="contentDiv" class="mainContent">
  <table cellspacing="0" border="0" width="100%">
   <tr>
     <td>
       <table width="100%" BORDER=1 cellpadding=0 cellspacing=0 style="padding: 5px 10px 10px 10px;">
         <tr>
           <TD STYLE="BACKGROUND: RED;" WIDTH="70%">

At the moment I'm playing with the source (See final line above) where I have hard coded the BACKGROUND: RED;

Can anyone think of a way of giving that TD a class when the page loads so that I can reference other classes within the TD from CSS? Im 99% sure JQUERY will be my savior : )

Something like:

$table.find('.contetentDiv table table td').removeClass('sorted')

????

Answer 1

This will do the trick:

$(function() {
    $('#contentDiv table table td:first').addClass('classToAdd');
});

You can then use .classToAdd in your CSS. The selector used in this snippet will assign the class only to the first td element.

Answer 2

<div id="contentDiv" class="mainContent">
  <table cellspacing="0" border="0" width="100%">
   <tr>
     <td>
       <table width="100%" BORDER=1 cellpadding=0 cellspacing=0 style="padding: 5px 10px 10px 10px;">
         <tr>
           <TD class="makeItRed" WIDTH="70%">

---

Try something like this:

$(document).ready(function(){ 
      $('makeItRed').addClass('makeItBlue');
      $('td:contains("TestData")').addClass('makeItGreen'); 
    });

Answer 3

try with this. then it can be adjusted to your needs:

jQuery("#contentDiv").find("table tr td").each(function(){
   $(this).find("table tr td").each(function(){
      $(this).css("background", "blue");
   });
});