为 JSF 数据表中的行生成 id答案

【问题标题】：Generate id for row in JSF datatable为 JSF 数据表中的行生成 id
【发布时间】：2011-01-09 16:25:47
【问题描述】：

我正在尝试使用核心面实现来实现 JSF 中表行的扩展/收缩功能。正如我之前的一个线程中所回答的那样，这并不是在核心面实现中直接实现的。于是，我想到了用 HTML + jQuery 来实现这个功能。我将带有 +/- gif 的行称为父行，而要扩展和收缩的行是它的子行。为了让父行知道它需要显示或隐藏哪个子行，我正在使用 jquery 并将行 ID 分配给每个 <tr>。如果父row-id="row1234"，那么子行将有row-id="row1234-child"。

以下是 Jquery 脚本和 HTML 代码：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
  <html>
   <head>
    <script src="jquery.js"></script>
    <script>
    $(document).ready(function(){
    $('.expand').click(function() {
     if( $(this).hasClass('.hidden') )
     {
                        $(this).attr("src", "plus.gif");
                    }
                else 
                {

                        $(this).attr("src", "subtract1.gif");
                    }

                $(this).toggleClass('hidden');

           $(this).parent().parent().siblings('#'+$(this).parent().parent().attr('id')+'-child').toggle();     

     });

      });
    </script>

    <style>
     .hover {background-color:#00f; color: #fff;}
    </style>
   </head>
   <body>
    <table border="1" cellspacing="0" cellpadding="0">
     <thead>
      <tr><th>Rolling </th><th>transaction</th></tr>
     </thead>
     <tbody>
      <TR class="parent" id="row123" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>123</TD>
  <TD colspan="2"><img 
  class="expand" src="plus.gif"/>ABC</TD>
  <TD>100</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-01-02</TD>
  <TD>A short description</TD>
  <TD>15</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-02-03</TD>
  <TD>Another description</TD>
  <TD>45</TD>
 </TR>
 <TR ID="row123-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-03-04</TD>
  <TD>More Stuff</TD>
  <TD>40</TD>
 </TR>
 <TR class="parent" id="row2345" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>234</TD>
  <TD colspan="2"><img class="expand" src="plus.gif"/>DEF</TD>
  <TD>100</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-01-02</TD>
  <TD>A short description</TD>
  <TD>15</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-02-03</TD>
  <TD>Another description</TD>
  <TD>45</TD>
 </TR>
 <TR ID="row2345-child" style="display: none; ">
  <TD>&nbsp;</TD>
  <TD>2007-03-04</TD>
  <TD>More Stuff</TD>
  <TD>40</TD>
 </TR>
 <TR class="parent" id="row3456" style="cursor: pointer; " title="Click to expand/collapse">
  <TD>345</TD>
  <TD colspan="2">HIJ</TD>
  <TD>100</TD>
 </TR>
     </tbody>
    </table>
   </body
  </html>

所以，我想知道是否可以为数据表生成行 ID，或者是否有更好的解决方案。

【问题讨论】：

大问题：你需要它做什么？当您尝试在客户端生成它时，您显然只需要在客户端生成它。当然有更好的客户端方法来解决您认为 this 是the 解决方案的问题。简而言之：只是详细说明功能需求，而不是询问如何实现解决方案（这可能不是正确的解决方案）。
BTW：要格式化代码，选择代码并按下编辑器工具栏中的010101 按钮或Ctrl+K。还请尽量不要混合制表符/空格，并尝试一致缩进（例如 4 或 2 个空格）。在体面的 IDE/编辑器中，您可以在设置中进行配置。
@Nrusingha - 请注意，根据 HTML 规范，元素 ID 必须是唯一的 - w3.org/TR/html4/struct/global.html#h-7.5.2

标签： jsf datatable row

【解决方案1】：

如果您只想使用 jQuery 访问单击图像的父行，那么只需执行以下操作：

var tr = $(this).parents('tr');

this 是被点击的图片。

【讨论】：

感谢 BalusC，我能够使用 Jquery 实现所需的功能。非常感谢您的宝贵建议和时间