function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ethan HotzEthan Hotz 

Using javascript to change the rowClasses attribute of a specific table

So I've got a page that generates tables dynamically and I'm trying to implement a function to show/hide table rows when a user double clicks on a header cell.
The relevant visualforce code:
 
<apex:pageBlock id="tableBlock">
    
        <apex:pageBlockTable value="{!dummyList}" var="dummyVar" columnsWidth="20%,8%">
          
            <apex:column headerValue="Developer" >
                
            </apex:column>
            <apex:repeat var="week" value="{!formattedWeekList}">
            <apex:column headerValue="{!week}" >
                
            </apex:column>
            </apex:repeat>
        </apex:pageBlockTable>
        
        <apex:variable var="rowNum" value="{!0}"/>
        <apex:repeat var="dev" value="{!userList}">
        <apex:variable var="rowNum" value="{!rowNum + 1}"/>
        <apex:pageBlockTable value="{!dev.projectMap}" var="project" id="userTable" rendered="{!tableVisible}" columnsWidth="20%,8%" ondblclick="toggleRows({!$Component.this});" rowClasses="display:none">
            
            <apex:column headerValue="{!dev.userName.name}" id="devHeader" headerClass="" >
                
                <apex:outputLink id="dataDev" value="/{!project}" rendered="{!IF(project == null, false, true)}" >{!IF(project == caseID, 'Current Case', project)}</apex:outputLink> 
                
            </apex:column>
            <apex:repeat value="{!dev.projectMap[project]}" var="date">
            
            <apex:column headerValue="{!dev.totalHourMap[date]}" id="hourHeader"  headerClass="{!dev.colColor[date]}" > 
               
                 <apex:outputText id="dataOutput" rendered="{!IF(project == null || project == caseID, false, true)}">{!dev.projectMap[project][date]}</apex:outputText>
                 <apex:inputText id="dataInput" rendered="{!IF(project == caseID, true, false)}" value="{!dev.projectMap[project][date]}" style="width:20%"/>
            
            </apex:column>
            
            </apex:repeat>
        </apex:pageBlockTable>
        </apex:repeat>

The first table is blank and just displays date headers. Following tables display user name and hour information in their table headers, with project information in rows. Using rowClasses="display:none" gets the visual I want, but I'm not sure how to toggle that when users click on the user name header cell. Will using javascript to change the CSS class used work here, or should I try a different approach?