SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to hide/show classes of rows in a table

    I have a table each row of which represents a consecutive day. There may be many days.

    At the moment, the class of each row is the day of the week.One of the columns of the table contains 7 boxes labelled M, T, W, T, F, S, S, M etc. There is one of these on each row.

    <tr class='.$day[$i].'">
    <td>".$date[$i]."</td>
    <td>
    M<input type='checkbox' onclick='myToggleClass(\"day1\");'>
    T<input type='checkbox' onclick='myToggleClass(\"day2\");'>
    ...for each day...
    </td>
    </tr>


    What I want to happen is that when I click M, T, W... all the rows of the class "day1","day2",... toggle on or off. (Actually, the rows from that date onwards only should toggle, but thats a refinement.)

    I've got them to toggle off ok with:

    var allPageTags = new Array();
    function myToggleClass(theClass) {
    var allPageTags=document.getElementsByTagName("*");
    for (i=0; i<allPageTags.length; i++) {
    var tag=allPageTags[i];
    if(tag.className==theClass){
    if(tag.style.display=='none'){
    tag.style.display='block';
    }else{
    tag.style.display='none';
    }
    }
    }
    }

    The problem arises when I want to toggle the rows back on. The rows re-appear ok, but not in their correct column. They are appended to the date in the first column rather than being in the second column.
    There is no CSS that should affect the positioning.
    Thanks
    Tony

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mynot View Post
    The problem arises when I want to toggle the rows back on.
    That's what happens when you change their display type to block. Don't do that.

    Instead, change the display type to an empty string, so that the element can be displayed in its default manner.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unnhh! Thanks Paul. Works beautifully.
    Tony


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •