在表中第一个tr的倒数第二个td中选择按钮-使用jQuery选择器
Selecting button in second last td of first tr in table - Using jQuery selector
我一直试图在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,这个W3 Schoosls教程是我用来帮助的。我们非常感谢所有的帮助和建议。
您可以选择的替代方案:
$('#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()
您可以使用:
$('.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-:第一个子项,MDN-:类型的倒数第n个子项
相关文章:
- 根据页面加载时的单选按钮选择显示某些字段
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- Ng点击记住单选按钮选择
- Angular未更新单选按钮选择
- jQuery为按钮选择设置活动类
- 阅读JS中的单选按钮选择
- JQuery IE11 单选按钮选择器
- 确认单选按钮选择
- 贝宝表单问题的单选按钮选择
- 使用javascript在单选按钮选择上加载URL
- 创建“;“全选”;按钮选择所有按钮
- 如何更改用户选项更改时中的Onchange事件中Visual Composer上的按钮(选择选项)
- 显示基于多个单选按钮选择的图像
- 基于输入值的单选按钮选择
- 将域类id返回到由单选按钮选择的控制器
- Jquery:单击按钮选择下拉选项
- 无法更改单选按钮选择 - KnockoutJS
- 单选按钮选择列表框更改并将 NULL 值传递给每个列表框
- 用户在Javascript的帮助下,仅通过单选按钮选择一个付款方式(信用卡)
- 基于多个单选按钮选择显示或隐藏元素