I've been trying to write a selector in jQuery which selects a button with a class in the second last td of the first tr in a table. This is what I've e up with so far:
$(':button.jtable-edit-mand-button tr:first td:nth-last-of-type(2)').trigger('click');
But it doesn't work.
I've also tried this:
$(':button.jtable-edit-mand-button:td:nth-last-of-type(2):tr:first').trigger('click');
But I get an error which says:
Syntax error, unrecognized expression: unsupported pseudo: td
Here's the JS Fiddle and this W3 Schoosls tutorial is what I'm using for help. All help and suggestions are greatly appreciated.
I've been trying to write a selector in jQuery which selects a button with a class in the second last td of the first tr in a table. This is what I've e up with so far:
$(':button.jtable-edit-mand-button tr:first td:nth-last-of-type(2)').trigger('click');
But it doesn't work.
I've also tried this:
$(':button.jtable-edit-mand-button:td:nth-last-of-type(2):tr:first').trigger('click');
But I get an error which says:
Syntax error, unrecognized expression: unsupported pseudo: td
Here's the JS Fiddle and this W3 Schoosls tutorial is what I'm using for help. All help and suggestions are greatly appreciated.
Share Improve this question edited Apr 3, 2021 at 14:12 Syscall 19.8k10 gold badges43 silver badges59 bronze badges asked Nov 6, 2014 at 20:44 shhasanshhasan 4532 gold badges9 silver badges21 bronze badges 02 Answers
Reset to default 4Alternative you can:
$('#tabs-Risks .jtable tr:eq(1) td:nth-last-child(2) button').css('color', 'red');<script src="https://ajax.googleapis./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-mand-column-header" style="width: 1%;"></th>
<th class="jtable-mand-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/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-mand-column">
<button title="Edit Risk" class="jtable-mand-button jtable-edit-mand-button"><span>Edit Risk</span>
</button>
</td>
<td class="jtable-mand-column">
<button title="Delete" class="jtable-mand-button jtable-delete-mand-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/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-mand-column">
<button title="Edit Risk" class="jtable-mand-button jtable-edit-mand-button"><span>Edit Risk</span>
</button>
</td>
<td class="jtable-mand-column">
<button title="Delete" class="jtable-mand-button jtable-delete-mand-button"><span>Delete</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>Of course in your example you use .trigger() instead of .css().
References:
:eq()
:nth-last-child()
You could use:
$('.jtable-data-row:first-child td:nth-last-of-type(2) button').css('background', 'red');<script src="https://ajax.googleapis./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-mand-column-header" style="width: 1%;"></th>
<th class="jtable-mand-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/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-mand-column">
<button title="Edit Risk" class="jtable-mand-button jtable-edit-mand-button"><span>Edit Risk</span>
</button>
</td>
<td class="jtable-mand-column">
<button title="Delete" class="jtable-mand-button jtable-delete-mand-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/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-mand-column">
<button title="Edit Risk" class="jtable-mand-button jtable-edit-mand-button"><span>Edit Risk</span>
</button>
</td>
<td class="jtable-mand-column">
<button title="Delete" class="jtable-mand-button jtable-delete-mand-button"><span>Delete</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>Reference: MDN - :first-child, MDN - :nth-last-of-type