在JSF2中顯示（編輯）使用JQuery的單行元素

Question

我的目標是擁有一個N行和M列的可編輯HTML表格。因此，我喜歡提供一種解決方案，將一行的所有元素都顯示爲可編輯，而其他行保持爲簡單的outputText。到目前爲止，我能夠顯示隱藏的字段，如果我知道行的確切ID。有問題...我不知道ID，因爲你知道JSF生成自己的ID，而且我有N（非特定數量）的行。

這是我的JSF/HTML代碼（Primefaces還集成）

<h:panelGroup id="table" layout="block" styleClass="ui-datatable ui-widget bearbeiten-ergebnisse__tabelle"> 
    <table> 
     <thead> 
     <tr> 
     <th class="ui-state-default"> 
      <h:outputText value="Editieren" /> 
     </th> 
     <ui:repeat 
      var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}"> 
      <th class="ui-state-default"> 
      <h:outputText value="#{func:getColumnNameSplit(column.header)}" escape="false"/> 
      </th> 
     </ui:repeat> 
     </tr> 
     </thead> 
     <tbody class="ui-datatable-data ui-widget-content"> 
     <ui:repeat id="rowTable" 
      var="rows" value="#{AuswahlBean.selectedMetaDataVersionResultSet}"> 
      <tr 
       id="#{component.clientId}" 
       class="ui-widget-content clickable-row"> 
       <td class="row-operation"> 
        <h:outputText styleClass="ui-row-edit" value="edit" /> 
        <h:outputText styleClass="ui-row-save hide-field" value="save " /> 
        <h:outputText styleClass="ui-row-cancel hide-field" value="cancel" /> 
       </td> 
       <ui:repeat 
       var="column" value="#{AuswahlBean.selectedMetaDataVersionColums}"> 
       <td> 
        <!-- Zelleninhalt, der nicht-editierbar ist --> 
        <h:outputText 
         value="#{rows[column.property]}" 
         styleClass="ui-outputfield" 
         rendered="#{column.typeText}"/> 
        <h:outputText 
        value="#{rows[column.property]}" 
        styleClass="ui-outputfield" 
        rendered="#{column.typeNumeric}" > 
        <f:converter converterId="DwhNumberConverter"/> 
        </h:outputText> 
        <h:outputText 
        value="#{rows[column.property]}" 
        styleClass="ui-outputfield" 
        rendered="#{column.typeDate}"> 
        <f:converter converterId="DwhDateConverter"/> 
        </h:outputText> 

        <!-- Zelleninhalt, der nicht-editierbar ist --> 
        <p:inputText 
         rendered="#{column.typeText}" 
         value="#{rows[column.property]}" 
         styleClass="hide-field" 
         required="true" 
         requiredMessage="Überprüfungsfehler: Eine Eingabe wird erwartet."/> 
        <p:inputText 
         rendered="#{column.typeNumeric}" 
         value="#{rows[column.property]}" 
         styleClass="hide-field" 
         required="true" 
         requiredMessage="Überprüfungsfehler: Eine Zahl wird erwartet." 
         converter="DwhNumberConverter"> 
         <p:ajax event="valueChange" async="TRUE" 
         update="@this :theForm:msg" /> 
        </p:inputText> 
        <p:calendar 
         rendered="#{column.typeDate}" 
         value="#{rows[column.property]}" 
         styleClass="calendar-inputfield hide-field" 
         pattern="dd.MM.yyy" 
         required="true" 
         requiredMessage="Ein Datum wird erwartet. Bitte geben Sie in Datum im Format tt.mm.jjjj an." 
         converter="DwhDateConverter"> 
         <p:ajax event="valueChange" async="TRUE" 
         update="@this :theForm:msg"/> 
        </p:calendar> 
       </td> 
       </ui:repeat> 
      </tr> 
     </ui:repeat> 
     </tbody> 
     </table> 
     </h:panelGroup> 

而且這裏JavaScript的snipet。

<script type="text/javascript"> 
    // Show the editable Row 
    $('.ui-row-edit').click(function(event){ 
    var editableRowId = $(this).closest('tr').attr('id'); 
    var fixedIdForJquerySelector = editableRowId.replace(/\:/g, '\\\\:'); 

    showInputFields(fixedIdForJquerySelector); 
    }); 
    function showInputFields(rowID) { 
    alert(rowID); 
    $("#"+rowID+" .ui-outputfield").css("color","red"); 
    /* $('#' + rowID + ' .ui-inputfield').removeClass('hide-field'); 
    $('#' + rowID + ' .calendar-inputfield').removeClass('hide-field'); 
    $('#' + rowID + ' .ui-outputfield').addClass('hide-field'); 
    $('#' + rowID + ' .ui-row-edit').addClass('hide-field'); 
    $('#' + rowID + ' .ui-row-save').removeClass('hide-field'); 
    $('#' + rowID + ' .ui-row-cancel').removeClass('hide-field'); */ 
    } 

    </script> 

由於任何原因，ID表達式不被接受爲jQuery選擇器。或者更準確地說，錯誤在於冒號後面的任何內容（在正則表達式中：''）正被讀爲CSS-pseudo-class。以下是火狐控制檯的錯誤消息：

Error: Syntax error, unrecognized expression: unsupported pseudo: rowTable\

有人可能會想到，這是普通的行爲，但如果我硬編碼相同的選擇（ID）這樣

$("#theForm\\:rowTable\\:0 .ui-outputfield").css("color","red"); 

代替

$("#"+rowID+" .ui-outputfield").css("color","red"); 

我會得到想要的行爲。

爲了達到這一點： a）有誰知道爲什麼選擇器不工作？ b）有沒有人有其他解決方案來編輯​​包含轉換器的單行？

提前致謝！

SOLUTION

通過@Denish jQuery的解決方案的幫助。即使我仍然不知道爲什麼行ID不被接受爲jQuery選擇器（任何提示，只是爲了背景知識？）。

$('.ui-row-edit').click(function(event) { 
     var editableRow = $(this).closest('tr'); 
     showInputFields(editableRow); 
    }); 

    function showInputFields(rowObject) { 
     rowObject.find('.ui-inputfield').toggleClass('hide-field'); 
     rowObject.find('.ui-outputfield').toggleClass('hide-field'); 
     // and so on for all necessary CSS-classes 
    } 

Answer 1

HTML代碼（DEMO：http://jsbin.com/vacul/1/edit）

<table> 
    <tr> 
     <td class="Bover"></td> 
     <td class="Orun"></td> 
     <td> 
      <input type="button" value="EDIT" class="Bedit" /> 
     </td> 
    </tr> 
</table> 

JQUERY：

$(document).ready(function() { 

    $('.Bedit').click(function() { 
    var dad = $(this).parent().parent(); 
    var btnvalue = $(this).val(); 
    if (btnvalue == "EDIT") { 

     var data = dad.find('.Bover').text(); 
     var data1 = dad.find('.Orun').text(); 

     dad.find('.Bover').text(''); 
     dad.find('.Orun').text(''); 


     dad.find('.Bover').append('<input type="text" class="hide" name="BOvers" value='+ data +' />'); 
     dad.find('.Orun').append('<input type="text" class="hide" name="BRuns" value='+ data1 +' />'); 

     $(this).val('NEXT'); 
    } 
    else { 
     var Bover = dad.find('[name="BOvers"]').val(); 
     dad.find('.Bover').text(Bover); 
     var Orun = dad.find('[name="BRuns"]').val(); 
     dad.find('.Orun').text(Orun); 

     dad.find('.hide').hide(); 

     $(this).val('EDIT'); 
    } 
    }); 
});