【问题标题】:How to addClass to the first td in every tr inside a table using jQuery如何使用jQuery将Class添加到表内每个tr中的第一个td
【发布时间】: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>

【问题讨论】:

    标签: jquery html jquery-selectors html-table


    【解决方案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的每一行的第一个&lt;td&gt;后面加上leftbord

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

      【讨论】:

        猜你喜欢
        • 2011-04-24
        • 2021-07-28
        • 1970-01-01
        • 2018-05-01
        • 2015-12-24
        • 2014-12-06
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多