Generate id for row in JSF datatable

问题

I am trying to achieve the expand/contract functionality of table rows in JSF using core faces implementation. As answered in one of my earlier thread this is not straight forward to achieve in core faces implementation. So, I thought of using HTML + jQuery to achieve the functionality. I am calling the row with +/- gif as parent row and the rows that are to be expanded and contracted are its child rows. To make parent row aware of which child it needs to show or hide, I am making use of jquery and assigning row id to each <tr>. If the parent row-id="row1234", then the child row will have row-id="row1234-child".

Below is the Jquery Script and HTML code:

    <!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>

So, I was wondering whether I can generate row id for datatable or if there is a better solution for it.

回答1:

If all you want is to access the parent row of the clicked image using jQuery, then just do:

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

Where this is the clicked image.

来源：https://stackoverflow.com/questions/2142341/generate-id-for-row-in-jsf-datatable

标签

jsf

datatable

row