使用jQuery更改使用JSF創建的表格的單元格

從使用JSF創建的xhtml頁面中，我需要使用JavaScript/jQuery來更改表格單元格的內容。我知道如何爲包含該表的div和tbody分配唯一的ID。我還可以爲div本身和目標列分配唯一的類名稱。目標行由data-rk屬性標識。使用jQuery更改使用JSF創建的表格的單元格

<div id="tabForm:centerTabView:personsTable" class="ui-datatable ui-widget personsTable"> 
    <table role="grid"> 
     <tbody id="tabForm:centerTabView:personsTable_data" > 
      <tr data-rk="2" > 
       <td ... /> 
       <td class="lastNameCol" role="gridcell"> 
        <div> To Be Edited </div> 
       </td> 
       <td ... /> 
      </tr> 
      <tr ... /> 
     </tbody> 
    </table> 
</div>

我試過很多不同的jQuery選擇器的組合，但我真的很失落。我需要在特定div內或特定表格內搜索目標行和目標列，因爲xhtml頁面可能包含具有不同唯一ID的其他表（並且意外地具有相同的行和列ID）。

來源

2012-06-08 perissf

像這樣的事情？

$("#tabForm\\:centerTabView\\:personsTable tr[data-rk=2] td.lastNameCol div").text("edited");

或者，如果personsTable是在當前視圖

$("[id$=personsTable] tr[data-rk=2] td.lastNameCol div").text("edited");

來源

2012-06-09 01:23:46 BalusC

很高興知道這種技術。我做了一個迂迴的方式。 +1！ – raddykrish

謝謝BalusC。這兩行代表了一個關於選擇器的幾乎完整的教程！順便說一句，第二行id後的美元符號是什麼原因？ – perissf

這是「Attribute-Ends-With」選擇器：http://api.jquery.com/attribute-ends-with-selector/ – BalusC

請檢查此琴爲您的新的HTML代碼

Fiddle without colon

Fiddle with Colon

來源

2012-06-08 21:17:40 raddykrish

我已經給出瞭解決方案作爲小提琴足夠獨特。你能檢查出來嗎？ – raddykrish

否。該行由data-rk屬性標識。另請注意，行ID和列ID是不夠的。我需要以某種方式搜索外部ID或至少在tbody標籤內部，因爲它們用唯一的ID標識。 – perissf

是你的案例中唯一的tbody ID嗎？ – raddykrish

使用jQuery更改使用JSF創建的表格的單元格

回答

相關問題