Question

I have two different things that I’m trying to do. I need to change the CSS of a td depending on:

1. Whether the printed date is earlier than today and
2. Whether the td just next to this is empty

This is the table I have:

<table><tr>
<td>October 27, 2012</td>
<td id="assigned">Yes</td>
</tr>
<tr>
<td>November 14, 2012</td>
<td id="assigned"></td>
</tr>
</table>

I know I can check whether the <td> is empty or not with jQuery. I also know that I can parse the date that’s on screen. But I can’t seem to get jQuery to iterate through every row in the table. This is the code that I have:

$(document).ready(function () {
$('#myTable tr').each(function(i){
var today = new Date();
var d = Date.parse($("#dueDate").text());
if(d < today && $("td#assigned").text()==""){
$("#dueDate").css("background-color","red");
}});
});

Am I off my rocker? I look at this and I think, it looks like it should work, but it doesn’t. Any help would be appreciated. Thanks!

Answer 1

looks like the problem seems to be arising because of duplicated ID’s in your HTML ..
ID’s in a HTML page are supposed to be unique..

Instead you can use .eq() and $(this) to search for the td

$(document).ready(function() {
    $('#myTable tr').each(function(i) {
        var $this = $(this);
        var $dueDate = $this.find('td:eq(0)');
        var $assigned = $this.find('td:eq(1)');
        var today = new Date();
        var d = Date.parse( $dueDate.text());
        if (d < today && $assigned.text() == "") {
            $duedate.css("background-color", "red");
        }
    });
});​

Fiddle