如何使用jQuery将Class添加到表内每个tr中的第一个td

Posted 2023-03-05

【中文标题】如何使用jQuery将Class添加到表内每个tr中的第一个td

【英文标题】：How to addClass to the first td in every tr inside a table using jQuery

【发布时间】：2010-10-31 00:16:54

【问题描述】：

我正在尝试将一个类添加到特定类中 tr 内的第一个 td 中。但是由于某种原因，它仅将此类添加到第一个 tr 中的第一个 td - 而不是每个 tr 中的第一个 td

$("#appendTD").find("#gridFormInformation").children(0).children().each(
                function() 
                    if ($("#appendTD").find('tr').filter(function()  return $(this).attr('class') == 'ui-widget-content ui-subtblcell'; ).children("td:eq(0)").addClass("leftbord"));
                
            );

但是当我通过删除 ""td:eq(0)" 来更改上述内容时，它会将此类添加到每个 tr 中的每个 td 中...那我做错了什么？

下面的标记示例

<td id="appendTD">
  <table id="gridFormInformation">
    <tbody>
      <tr><th>1</th><th>2</th><th>3</th></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
      <tr class="ui-widget-content ui-subtblcell"><td>1</td><td>2</td><td>3</td></tr>
    </tbody>
  </table>
</td>

【参考方案1】：

在我看来，您正在使用复杂的手动方式来查找要添加类的 td。我相信使用 jQuery 选择器来找到你的 tds 会更容易。

替换

$("#appendTD").find("#gridFormInformation").children(0).children().each(
            function() 
                if ($("#appendTD").find('tr').filter(function()  return $(this).attr('class') == 'ui-widget-content ui-subtblcell'; ).children("td:eq(0)").addClass("leftbord"));
            
        );

与

$("#gridFormInformation tr.ui-widget-content.ui-subtblcell").find("td:first").addClass("leftbord");

这将找到所有的 trs 并为每个 tr 找到第一个 td 并将类添加到其中。

【讨论】：

正是我想要的！谢谢:-)

【参考方案2】：

将'td:eq(0) 更改为'td:first'。

【参考方案3】：

这个方法是在表格gridFormInformation的每一行的第一个<td>后面加上leftbord：

$('#gridFormInformation tr td:first-child').addClass('leftbord');