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

我的目标是拥有一个具有N行和M列的可编辑HTML表。因此，我想提供一个解决方案，它将一行的所有元素显示为可编辑，而其他行保持为简单的outputText。到目前为止，如果我知道行的确切ID，我能够显示隐藏字段。有一个问题。。。我不知道ID，正如您所知，JSF生成自己的ID，我有N行（非特定数量）

这是我的JSF/HTML代码（Primefaces也是集成的）

而不是

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

我会被通缉的

说到点子上： a） 有人知道为什么选择器不能工作吗？ b） 是否有人有其他解决方案来编辑包含转换器的单行

提前谢谢

解决方案

jQuery解决方案由@Denish提供帮助。尽管我仍然不知道为什么行ID不被接受为jQuery选择器（关于这方面的任何提示，只是为了了解背景知识？）

HTML代码（演示：）

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

$（文档）.ready（函数（）{
$（'.Bedit'）。单击（函数（）{
var dad=$（this.parent（）.parent（）；
var btnvalue=$（this.val（）；
如果（BTN值==“编辑”）{
var data=dad.find（'.Bover'）.text（）；
var data1=dad.find（'.Orun'）.text（）；
dad.find（'.Bover'）.text（''）；
dad.find（'.Orun'）.text（''）；
dad.find（'.Bover'）.append（''）；
dad.find（'.Orun'）.append（''）；
$（this.val（'NEXT'）；
}
否则{
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'）；
}
});
});

您是否有针对每个td的唯一idrow@Dinesh起初，我没有设置任何ID或标签。对于-tag，我使用clientID来更简单地控制想要的行。但如果有一个不设置ID的解决方案，我将非常感激。另一方面，如果您的解决方案依赖于-tags的IDs，那么您可以确保JSF会这样做，或者我使用与-tag

id=“#{component.clientId}”相同的解决方案

.k朋友，我无法理解您的问题，但我希望用户可以单击td，然后您需要显示文本框并获取值，可以吗right@Dinesh部分是对的。如果用户单击一行（或该行中的一个元素），整行应该是可编辑的（显示inputfields），捕获新值，转换并验证它们，最后保存所有值。只需做一件事，用户单击时隐藏输入类型字段，您可以显示文本框您想为此编写代码吗谢谢您的先生，您向我展示了诀窍。借助jQuery函数

find（[selector]）

我可以完成它。再次感谢朋友，经过两天的工作，我终于有了解决办法；-）我在我的问题下面发布了我的最终解决方案。我几乎自己用jQuery函数

children（[selector]）

找到了解决方案，但我犯了一个错误，在第一级child（-tags）中查找了该类。为了清楚起见，我使用了

rowObject.children（'.ui-inputfield'）.removeClass（'hide-field'）

而不是

rowObject.children（）.children（'.ui-inputfield'）.removeClass（'hide-field'）

。我认为children函数将搜索DOM树的所有子级。也许这个解决方案会帮助其他人，即使上面的解决方案更优雅。你现在还没有得到解决你说“你现在还没有得到解决”是什么意思？几天前我将你的答案标记为解决方案。。。

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

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

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

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

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