選擇按鈕表 - 使用jQuery選擇

我一直在試圖寫在jQuery的選擇與在表中的第一TR的倒數第二個TD一類選擇按鈕。這是我到目前爲止：選擇按鈕表 - 使用jQuery選擇

$(':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是我使用的是什麼樣的幫助。所有的幫助和建議非常感謝。

來源

2014-11-06 shhasan

你可以使用：

$('.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

來源

2014-11-06 20:50:37 emmanuel

哇，我從來不知道'第n-最後child'存在。 – 2014-11-06 20:51:20

一個重要的注意的是，第n-最後孩子認爲所有的孩子們，不只是匹配的元素類型的人。例如，如果行中倒數第二個元素不是td，它仍然會被選中。 – Marcelo 2014-11-06 20:54:43

感謝您的及時回覆。您的建議有效。有沒有一種方法可以選擇'id =「tabs-Risks」'''div'中的按鈕？ – shhasan 2014-11-06 21:20:21

替代，您可以：

$('#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()

來源

2014-11-06 20:59:52

謝謝你。你的建議。它的工作原理well.Is有辦法，我可以只選擇按鈕，這是在'div'用'ID =「選項卡 - 風險」'？ – shhasan 2014-11-06 21:21:25

找到它：'$（ '＃標籤，風險.jtable數據行：第一胎TD：第n-最後的式（2）按鈕'）觸發（ '點擊'）;' – shhasan 2014-11-06 21:23:42

檢查更新代碼。。 – 2014-11-06 21:23:49

選擇按鈕表 - 使用jQuery選擇

回答

相關問題