VF Page - Apex:repeat messing up jQuery Expandable Rows

Question

I am using TableSorter.js for table sorting, and also using Janko's Expandable jQuery Table Rows . I am using a regular HTML table and . The issue is that for the last couple of rows, the 'even' row is showing up as 'odd'...

Here's an example (don't mind the redacted blanks - they just cover labels): EDIT: the text in pic should say "this row should be ODD, but it is not"

As you can see, the "additional" information is considered as an "tr.odd" (css makes odd background color Green), and the last row, shows up as "tr.even". This messes up the clicking to expand. I'll post my code below. I think it's the apex:repeat that's causing issues.

SCRIPTS

<apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery.min.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery.tablesorter.min.js')}"/>  


    <!-- testing below: draggable table -->
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/jquery.dragtable.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/dragtable.css')}"/>  

    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.css')}"/> 
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.green.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.css')}"/> 

<script type="text/javascript">  
    j$ = jQuery.noConflict();
    j$(document).ready(function () {

j$("#mytable tr:odd").addClass("odd");
        j$("#mytable tr:not(.odd)").hide();
        j$("#mytable tr:first-child").show();

        j$("#mytable tr.odd").click(function(){  
        j$(this).next("tr").toggle();
        j$(this).find("arrow").toggleClass("up");
        });

sortTable();
});
function sortTable(){
        j$("[id$=mytable]").tablesorter();
    }
</script>  

CODE

<apex: pageblocksection>
  <apex:outputpanel>

<table id=mytable class=tablesorter">
 <thead>
   <tr>
     <th>My headers</th>
   </tr>
</thead>
<apex repeat value="{!value}" var="c">

 <tbody>
    <!--My 'Odd' Rows - click these to expand -->
    <tr>
     <td> {!c.someValue} </td>
    </tr>

   <!-- My 'Even' Rows - these expand when Odds are clicked -->
    <tr>
       <td>
            <ul>
                  <li> line 1 </li>
                  <li> <!c.someOtherValue </li>
            </ul>
       </td>
    </tr>

  </tbody>
</apex:repeat>
</table>
</outputpanel>

Any thoughts here?

Answer 1

I think the issue is with <tbody> inside <apex:repeat> tag. I tried your code with Account object with some modification and it is working fine. I have commented the dragtable part with this code. Hope this helps.

You can run this as below. 001i000000gDY4a is a Account id.

https://<salesforce url>/apex/tablesort?id=001i000000gDY4a

Standalone VF page

<apex:page standardController="Account" showHeader="false" sidebar="false" standardStylesheets="false">
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.green.css')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, 'theme.default.css')}"/>     

    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery.min.js')}"/> 
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery-ui.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, 'jquery.tablesorter.min.js')}"/>  

    <!-- testing below: draggable table -->
    <!-- <apex:includeScript value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/jquery.dragtable.js')}"/> -->
    <!-- <apex:stylesheet value="{!URLFOR($Resource.jQueryLibrary, '/dragtable/dragtable.css')}"/> --> 

    <table id="mytable" class="tablesorter tablesorter-default">
        <tr>
            <th>Case Number</th><th>Origin</th>
            <th>Creator Email</th><th>Status</th>
        </tr>
        <apex:variable value="{!1}" var="rowNum"/>
        <apex:repeat var="cases" value="{!Account.Cases}">
        <tr>
            <td>{!FLOOR(rowNum)}</td>
            <td>{!cases.CaseNumber}</td>
            <td>{!cases.Origin}</td>
            <td>{!cases.Contact.email}</td>
            <td>{!cases.Status}</td>
        </tr>
        <apex:variable var="rowNum" value="{!rowNum + 1}"/>
        </apex:repeat> 
    </table>    
    <script type="text/javascript">
        j$ = jQuery.noConflict();
        j$(document).ready(function () {
            j$("#mytable tr:odd").addClass("odd");
            j$("#mytable tr:not(.odd)").hide();
            j$("#mytable tr:first-child").show();
            j$("#mytable tr.odd").click(function(){  
                j$(this).next("tr").toggle();
                j$(this).find("arrow").toggleClass("up");
            });
            sortTable();
        });
        function sortTable(){
            j$("[id$=mytable]").tablesorter();
        }    
    </script>
</apex:page>

Collapsed Expanded