如何选择表格行中的图像？

Question

我在页面上有一个表格，如下所示：

<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&amp;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>    

当文档准备好时，我对每个数据行执行一些操作，如下所示：

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

当特定行的操作完成时，我希望隐藏该行中的“imgProgress”。 我在选择图像时遇到问题，以便将其显示设置为“无”

当前我正在 eloop 中尝试它，如下所示：

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

我做错了什么？我如何选择图像？

Answer 1

以下应该有效：

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

Answer 2

由于 img 有一个 id（该 ID 在文档中必须是唯一的），请使用

$('#imgProgress');

：从文档中，您可以使用 jQuery .remove() 方法。

Answer 3

您的所有单元格上都有一个看起来并不唯一的 ID。将每个 TD 中的 ID 附加到类中，而不是作为 ID。

然后：

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

Answer 4

如果您在

或者将“this”更改为表格行的 ID/类。

Answer 5

好的一件事。不要在 DOM 中重复 ID 是一个坏主意，jquery 只能找到具有该 id 的某个选择器的第一个。

如果您处于某个 tr 的函数中，您可以更改该 tr 中的 img （带有类）：

$('.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)
})

Answer 6

HTML

使用 class="imgProgress" 代替

JS

将其更改为

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