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伪类。以下是firefox控制台的错误消息：

错误：语法错误，无法识别的表达式：unsupported pseudo：rowTable \

如果我像这样硬编码相同的选择器（ID），有人可以预期这是常规行为吗？

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

而不是

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

我会得到想要的行为。

要明白这一点： a）有谁知道为什么选择器不起作用？ b）是否有人有其他解决方案来编辑包括转换器在内的单行？

提前致谢！

解

@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 CODE（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');
    }
  });
});

在JSF2中使用JQuery显示（使可编辑的）单行的元素

1 个答案: