How to select an image in a table row?

I have a table on a page like so:

<table id="ctl00_PlaceHolderMain_Table_Name" class="schedule-table" cellspacing="1" border="0" style="width:100%;">
<tr>
    <td class="resource-header"><span class="resource-header-text">Personnel</span></td>
    <td class="resource-header"><span class="resource-header-text">Office</span></td>
    <td class="dow"><span class="dow">Tue<br>01</span></td><td class="dow"><span class="dow">Wed<br>02</span></td><td class="dow"><span class="dow">Thu<br>03</span></td><td class="dow"><span class="dow">Fri<br>04</span></td><td class="weekend"><span class="weekend-text">Sat<br>05</span></td><td class="weekend"><span class="weekend-text">Sun<br>06</span></td><td class="dow"><span class="dow">Mon<br>07</span></td>...and so on until end of month...<td class="dow"><span class="dow">Thu<br>31</span></td>
</tr>
<tr class="DataRow" id="DataRow_8">
<td class="resource" style="display:none;"><span class="resource">8</span></td>
<td class="resource" id="TD_Name"><img src="../../images/epas/working.gif" width="16" height="16" alt="Working..." id="imgProgress" /><span title="Lname, Fname " class="resource">Lname, Fname</span></td>
<td class="resource" id="TD_Office"><span>A6OK</span></td>
<td class="dow" id="TD_1" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=01-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
<td class="dow" id="TD_2" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=02-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
<td class="dow" id="TD_3" onDblClick="location.href('myurl.aspx?p=8&am开发者_如何学运维p;e=0&amp;d=03-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
<td class="dow" id="TD_4" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=04-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
<td class="weekend" id="TD_5" onDblClick="location.href('.aspx?p=8&amp;e=0&amp;d=05-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
<td class="weekend" id="TD_6" onDblClick="location.href('myurl.aspx?p=8&amp;e=0&amp;d=06-Mar-2011&amp;o=8&amp;v=A6OK');"></td>
    .
    .
    .
and so on until end of month
    .   
    .
    .
</tr>
    .
    .
    .
and a bunch more similar rows
    .
    .
    .
</table>    

When the document is ready I perform some operations on each data row like so:

$('.DataRow').each(function(){  //do stuff  } );

When the operations are complete for a particular row I wish to hide the 'imgProgress' in that row. I am having trouble selecting the image so that I can set its display to 'none'

Currently I am trying it within th eloop like so:

$(this).find(.imgProgress')attr('display', 'none');

What am I doing wrong? How can I select the image?

The following should work:

$('#imgProgress').css('display','none');

Since the img has an id (which must be unique within the document), use that:

$('#imgProgress');

To remove this from the document, you could use the jQuery .remove() method.

All of your cells have an ID on them that does not look unique. Append that ID in each TD to the class instead of as an ID.

Then:

$(this).children('.TD_Name').children('img').css('display', 'none'); //where "this" is the TR object

$("#imgProgress", this) or $(this).find("#imgProgress") would select the imageProgress ID if you're performing your jQuery on the <td>

Or change "this" to the ID/Class of your table row.

ok for one thing. dont repeat IDs in the DOM is a bad idea and jquery only finds the 1st of a certain selector with that id.

if you are in a function for a certain tr you can change the img in that tr (with classes):

$('.DataRow').each(function(){ 
    //something in the tr...
    $($(this).children('td')[0]).children('.imgProgress').hide();
    //all done and hide this tr's img (in the 1st td)
})

HTML

Use class="imgProgress" instead

JS

Change it to

$(this).find('.imgProgress').hide();