在表中第一个 tr 的倒数第二个 td 中选择按钮 - 使用 jQuery 选择器答案

【问题标题】：Selecting button in second last td of first tr in table - Using jQuery selector在表中第一个 tr 的倒数第二个 td 中选择按钮 - 使用 jQuery 选择器
【发布时间】：2015-01-03 12:36:03
【问题描述】：

我一直在尝试在 jQuery 中编写一个选择器，该选择器在表中第一个 tr 的倒数第二个 td 中选择一个带有类的按钮。到目前为止，这是我想出的：

$(':button.jtable-edit-command-button tr:first td:nth-last-of-type(2)').trigger('click');

但它不起作用。

我也试过这个：

$(':button.jtable-edit-command-button:td:nth-last-of-type(2):tr:first').trigger('click');

但我收到一条错误消息：

Syntax error, unrecognized expression: unsupported pseudo: td

这是我用来寻求帮助的 JS Fiddle 和 this W3 Schoosls tutorial。非常感谢所有帮助和建议。

【问题讨论】：

标签： javascript jquery html css jquery-selectors

【解决方案1】：

你可以选择：

$('#tabs-Risks .jtable tr:eq(1) td:nth-last-child(2) button').css('color', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-Risks" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="FourthTab" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
  <div id="RiskTableContainer" class="jTableContainer" style="width:100%;">
    <div class="jtable-main-container">
      <div class="jtable-busy-panel-background jtable-busy-panel-background-invisible" style="display: none; width: 1432px; height: 835px;"></div>
      <div class="jtable-busy-message" style="display: none;"></div>
      <div class="jtable-title">
        <div class="jtable-title-text">Risks</div>
      </div>
      <table class="jtable">
        <thead>
          <tr>
            <th class="jtable-column-header jtable-column-header-sortable jtable-column-header-sorted-asc" style="width: 3.91146589259797%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">WBS</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: table-cell; width: 6.25834542815675%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Task Name</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.47169811320755%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Risk Event</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.40493468795356%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date of Concern</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 8.88969521044993%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.04499274310595%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date Identified</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.26705370101597%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Days Open</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Date Closed</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Type</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Mitigation Cost</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.54281567489115%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Probability</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Effect</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Cost Impact</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.97822931785196%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Overall Impact</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.90275761973875%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Expected Cost</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 14.2235123367199%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Discussion</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority Effect</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority ($)</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.19158200290276%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Severe?</span>

              </div>
            </th>
            <th class="jtable-command-column-header" style="width: 1%;"></th>
            <th class="jtable-command-column-header" style="width: 1%;"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="jtable-data-row" data-record-key="267">
            <td>1.0</td>
            <td>Obtain building permits</td>
            <td><a href="http://shhasan.ddns.net/risk/view/267">get building permit earlier</a>

            </td>
            <td>2014-03-18</td>
            <td>start dry wall job earlier then expected</td>
            <td>2014-01-21</td>
            <td>269</td>
            <td style="display: none;">2014-10-17</td>
            <td style="display: none;">Opportunity</td>
            <td style="display: none;"></td>
            <td>0%</td>
            <td>70</td>
            <td>$3000</td>
            <td>0</td>
            <td>$0</td>
            <td>This will only effect dry wallers</td>
            <td>10</td>
            <td>1</td>
            <td>No</td>
            <td class="jtable-command-column">
              <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>

              </button>
            </td>
            <td class="jtable-command-column">
              <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>

              </button>
            </td>
          </tr>
          <tr class="jtable-data-row jtable-row-even" data-record-key="650">
            <td>14.3.1</td>
            <td>Plumbing</td>
            <td><a href="http://shhasan.ddns.net/risk/view/650">Leaks</a>

            </td>
            <td>2014-10-05</td>
            <td></td>
            <td>2014-09-26</td>
            <td>26</td>
            <td style="display: none;">2014-10-22</td>
            <td style="display: none;">Threat</td>
            <td style="display: none;"></td>
            <td>0%</td>
            <td>0</td>
            <td>$1002</td>
            <td>0</td>
            <td>$0</td>
            <td></td>
            <td>10</td>
            <td>1</td>
            <td>No</td>
            <td class="jtable-command-column">
              <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>

              </button>
            </td>
            <td class="jtable-command-column">
              <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>

              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

当然，在您的示例中，您使用 .trigger() 而不是 .css()。

参考资料：

:eq()

:nth-last-child()

【讨论】：

感谢您的建议。它也可以。有没有办法只选择div 和id="tabs-Risks" 中的按钮？
找到它：$('#tabs-Risks .jtable-data-row:first-child td:nth-last-of-type(2) button').trigger('click');
两种解决方案都能完美运行。我选择了伊曼纽尔的答案，因为他先回答。

【解决方案2】：

你可以使用：

$('.jtable-data-row:first-child td:nth-last-of-type(2) button').css('background', 'red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="tabs-Risks" class="tab ui-tabs-panel ui-widget-content ui-corner-bottom" aria-labelledby="FourthTab" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block;">
  <div id="RiskTableContainer" class="jTableContainer" style="width:100%;">
    <div class="jtable-main-container">
      <div class="jtable-busy-panel-background jtable-busy-panel-background-invisible" style="display: none; width: 1432px; height: 835px;"></div>
      <div class="jtable-busy-message" style="display: none;"></div>
      <div class="jtable-title">
        <div class="jtable-title-text">Risks</div>
      </div>
      <table class="jtable">
        <thead>
          <tr>
            <th class="jtable-column-header jtable-column-header-sortable jtable-column-header-sorted-asc" style="width: 3.91146589259797%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">WBS</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: table-cell; width: 6.25834542815675%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Task Name</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.47169811320755%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Risk Event</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.40493468795356%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date of Concern</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 8.88969521044993%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.04499274310595%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Date Identified</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.26705370101597%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Days Open</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Date Closed</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Type</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="display: none;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Mitigation Cost</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 6.54281567489115%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Probability</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Effect</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.83599419448476%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Cost Impact</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 4.97822931785196%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Overall Impact</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.90275761973875%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Expected Cost</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 14.2235123367199%;">
              <div class="jtable-column-header-container"> <span class="jtable-column-header-text">Impact Discussion</span>

                <div class="jtable-column-resize-handler"></div>
              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority Effect</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.12046444121916%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Priority ($)</span>

              </div>
            </th>
            <th class="jtable-column-header jtable-column-header-sortable" style="width: 5.19158200290276%;">
              <div class="jtable-column-header-container"><span class="jtable-column-header-text">Severe?</span>

              </div>
            </th>
            <th class="jtable-command-column-header" style="width: 1%;"></th>
            <th class="jtable-command-column-header" style="width: 1%;"></th>
          </tr>
        </thead>
        <tbody>
          <tr class="jtable-data-row" data-record-key="267">
            <td>1.0</td>
            <td>Obtain building permits</td>
            <td><a href="http://shhasan.ddns.net/risk/view/267">get building permit earlier</a>

            </td>
            <td>2014-03-18</td>
            <td>start dry wall job earlier then expected</td>
            <td>2014-01-21</td>
            <td>269</td>
            <td style="display: none;">2014-10-17</td>
            <td style="display: none;">Opportunity</td>
            <td style="display: none;"></td>
            <td>0%</td>
            <td>70</td>
            <td>$3000</td>
            <td>0</td>
            <td>$0</td>
            <td>This will only effect dry wallers</td>
            <td>10</td>
            <td>1</td>
            <td>No</td>
            <td class="jtable-command-column">
              <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>

              </button>
            </td>
            <td class="jtable-command-column">
              <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>

              </button>
            </td>
          </tr>
          <tr class="jtable-data-row jtable-row-even" data-record-key="650">
            <td>14.3.1</td>
            <td>Plumbing</td>
            <td><a href="http://shhasan.ddns.net/risk/view/650">Leaks</a>

            </td>
            <td>2014-10-05</td>
            <td></td>
            <td>2014-09-26</td>
            <td>26</td>
            <td style="display: none;">2014-10-22</td>
            <td style="display: none;">Threat</td>
            <td style="display: none;"></td>
            <td>0%</td>
            <td>0</td>
            <td>$1002</td>
            <td>0</td>
            <td>$0</td>
            <td></td>
            <td>10</td>
            <td>1</td>
            <td>No</td>
            <td class="jtable-command-column">
              <button title="Edit Risk" class="jtable-command-button jtable-edit-command-button"><span>Edit Risk</span>

              </button>
            </td>
            <td class="jtable-command-column">
              <button title="Delete" class="jtable-command-button jtable-delete-command-button"><span>Delete</span>

              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

参考：MDN - :first-child，MDN - :nth-last-of-type

【讨论】：

哇，我从来不知道nth-last-child 存在。
一个重要的注意事项是 nth-last-child 考虑所有的孩子，而不仅仅是那些与元素类型匹配的孩子。例如，如果行中倒数第二个元素不是 td，它仍会被选中。
感谢您的及时回复。你的建议有效。有没有办法只选择div 和id="tabs-Risks" 中的按钮？
当然可以在选择器前面添加#tabs-Risks。
找到它：$('#tabs-Risks .jtable-data-row:first-child td:nth-last-of-type(2) button').trigger('click');