highlight individual cell

i am working on a problem at the moment that I am having a fair amount of difficulty with. thanks to some amazingly wonderful programers I have some javascript code that allows me to highlight a full row on a table if a cell, with id="date", has a date that is in the past. however now I am trying to convert this so that it only highlights the cell with the date itself. the code I have so is

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
body {
background-color: transparent;
padding: 10px;
}
#demotable1 tr {
background: white;
}

#demotable1 tr.past {
background: #FF0000;
color: #999999;
}
</style开发者_如何学Go>
<script type="text/javascript">
//<![CDATA[

$(function()
{
$('#demotable1 .date').each(function()
{
var cell_date = Date.parse($(this).text().replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$2/$1/$3'));
var now_date = new Date().getTime();
if(cell_date < now_date)
{
$(this).parent('tr').addClass('past')
}
}
);
}
);

//]]>
</script>

I have tried changing .parent to .child and just about every conceivable variation of this that I can think of.

Any help with this problem will be greatly appriciated.

Just change your style to be for a <td> instead of a <tr>, like this:

#demotable1 td.past {
  background: #FF0000;
  color: #999999;
}

And change your code to apply the class to that cell instead of the parent, so replace this:

$(this).parent('tr').addClass('past')

With this:

$(this).addClass('past')