SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Toggle visibility of table rows and cells

    I'm trying to toggle the visibility of individual table cells as well as entire rows with checkboxes.

    I've been able to hide rows with radio buttons, but can't figure out how to translate this to checkbox toggling (checked = visibility: visible, unchecked = visibility: hidden).
    http://www.public-health.uiowa.edu/p...art/test3.html

    Any suggestions are much appreciated.

    Whoops, nevermind. Of course, after working on this all day, I figure it out right after posting.
    http://www.public-health.uiowa.edu/p...art/test4.html

    I'm very new to Javascript, so if anyone has any comments about my code, I'm all ears.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    
    ..........
    ..........
    function toggle(oCheckbox)
    {
    	var oForm = oCheckbox.form; //get form object
    	var el, i = 1, all_checked = true, is_pickall = (oCheckbox.id == 'pickall');
    	while (el = oForm.elements[i++]) //loop
    	{
    		row_id = 'r' + el.id.split('pick')[1]; //assemble row id from checkbox id
    		if (is_pickall) //"All Rows" ticked so, set visibility & box tick accordingly
    		{
    			document.getElementById(row_id).style.visibility = (oCheckbox.checked) ? 'visible' : 'hidden';
    			el.checked = oCheckbox.checked;
    		}
    		else //individual setting so, toggle corresponding row and unset flag if any box is unchecked
    		{
    			document.getElementById(row_id).style.visibility = (el.checked) ? 'visible' : 'hidden';
    			all_checked = (el.checked && all_checked);
    		}
    	}
    		if (!is_pickall)
    			document.getElementById('pickall').checked = all_checked; //update "All Rows" box using flag
    }		
    
    </script>
    </head>
    <body onload="x=document.forms[0].elements[0];x.checked=true;x.onclick()"><!-- display all -->
    <div id="maincontain">
    <div id="content">
    <form>
    <p style="border-bottom: 1px solid #666;"><strong>show:</strong><br />
    <input type="checkbox" id="pickall" checked="checked" onclick="toggle(this)" /><label for="pickall">All Rows</label><br />
    <input type="checkbox" id="pick0" checked="checked" onclick="toggle(this)" /><label for="pick0">Row 0</label>
    <input type="checkbox" id="pick1" checked="checked" onclick="toggle(this)" /><label for="pick1">Row 1</label>
    <input type="checkbox" id="pick2" checked="checked" onclick="toggle(this)" /><label for="pick2">Row 2</label>
    <input type="checkbox" id="pick3" checked="checked" onclick="toggle(this)" /><label for="pick3">Row 3</label>
    <input type="checkbox" id="pick4" checked="checked" onclick="toggle(this)" /><label for="pick4">Row 4</label>
    <input type="checkbox" id="pick5" checked="checked" onclick="toggle(this)" /><label for="pick5">Row 5</label><br />
    <input type="checkbox" id="pick6" checked="checked" onclick="toggle(this)" /><label for="pick6">Row 6</label>
    <input type="checkbox" id="pick7" checked="checked" onclick="toggle(this)" /><label for="pick7">Row 7</label>
    <input type="checkbox" id="pick8" checked="checked" onclick="toggle(this)" /><label for="pick8">Row 8</label>
    <input type="checkbox" id="pick9" checked="checked" onclick="toggle(this)" /><label for="pick9">Row 9</label>
    <input type="checkbox" id="pick10" checked="checked" onclick="toggle(this)" /><label for="pick10">Row 10</label>
    <input type="checkbox" id="pick11" checked="checked" onclick="toggle(this)" /><label for="pick11">Row 11</label><br />
    <input type="checkbox" id="pick12" checked="checked" onclick="toggle(this)" /><label for="pick12">Row 12</label>
    <input type="checkbox" id="pick13" checked="checked" onclick="toggle(this)" /><label for="pick13">Row 13</label>
    <input type="checkbox" id="pick14" checked="checked" onclick="toggle(this)" /><label for="pick14">Row 14</label>
    <input type="checkbox" id="pick15" checked="checked" onclick="toggle(this)" /><label for="pick15">Row 15</label>
    <input type="checkbox" id="pick16" checked="checked" onclick="toggle(this)" /><label for="pick16">Row 16</label>
    <input type="checkbox" id="pick17" checked="checked" onclick="toggle(this)" /><label for="pick17">Row 17</label>
    </p>
    </form>
    ..........
    ..........
    
    No comment, just an alternative.
    Last edited by adios; Feb 26, 2004 at 00:49.
    ::: certified wild guess :::

  3. #3
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    No comment, just an alternative.
    Cool, thanks! The onclick="toggle(this)" is much simpler than what I was using.

    Is there a similar way to toggle both cells and rows?
    Last edited by mherring; Feb 26, 2004 at 10:30.

  4. #4
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you mean columns & rows? Please say YES.
    ::: certified wild guess :::

  5. #5
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Did you mean columns & rows? Please say YES.
    I wish I only needed to work with entire columns, but I need individual cells to show/hide.

    If this is possible, I can move to the next step of having specific ranges of columns show based on the value calculated in the "total" text field of this page:
    http://www.public-health.uiowa.edu/p...art/test2.html

    The object is to have cells in one column (based on age, which is passed to this page with ASP) become visible as the total increases. When the questions on the right are answered, a submit button will be pushed and the row with the top-most cell visible should show, creating a "T" shape.

    Is this possible with Javascript?

    Thanks for any ideas!

  6. #6
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Was afraid of that. Sounds like you need a complete display algorithm, the gist of which is escaping me at this moment (my systolic blood pressure might be too high). It's not only possible client-side, but the kind of functionality made easy by DOM programming. Hopefully you/someone can get a handle on it; in case it helps, I've posted a .zip below relating to what I thought you were asking for.
    Attached Files Attached Files
    ::: certified wild guess :::

  7. #7
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Was afraid of that. Sounds like you need a complete display algorithm, the gist of which is escaping me at this moment (my systolic blood pressure might be too high). It's not only possible client-side, but the kind of functionality made easy by DOM programming. Hopefully you/someone can get a handle on it; in case it helps, I've posted a .zip below relating to what I thought you were asking for.
    Hey, thanks for the example file. I think I can learn a lot from seeing how it works. My blood pressure has also been growing steadily, but it's good to see that this toggling is possible client-side. Thanks for all your help!

  8. #8
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey m...if you're still around - post a description, if you like, of exactly what the vertical axis of that table represents, and the significance of displaying that T-shape. Any elaboration would help; this looks to be easier than I at first thought.
    ::: certified wild guess :::

  9. #9
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    hey m...if you're still around - post a description, if you like, of exactly what the vertical axis of that table represents, and the significance of displaying that T-shape. Any elaboration would help; this looks to be easier than I at first thought.
    Sure. The vertical axis represents the number in that "total" box, based on values passed from the question radio buttons.

    If the total is 5, every cell from 0 to 5 should be visible within the user's age group column (50-54, for example). When another question is answered, the total will increase or decrease, which will show or hide additional cells.

    The T-shape is a projection of risk through all the age groups once all the questions are answered. (The numbers inside the cells represent percentage of heart attack risk in the next ten years).

    Here's an example (without the questions) I wrote today using the DOM:
    http://www.public-health.uiowa.edu/p..._chart/13.html

    Hopefully this explains it better. The onclick codes are really long in this example because I haven't figured out how to shorten them. Any help with this would also be much appreciated!

  10. #10
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, had another go at it. Still not sure I follow the methodology but that's nothing new. cya...
    Attached Files Attached Files
    Last edited by adios; Feb 28, 2004 at 22:04.
    ::: certified wild guess :::

  11. #11
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    OK, had another go at it. Still not sure I follow the methodology but that's nothing new. cya...
    Wow, this is really close to what I was trying to do. I'm hoping I can take it from here. Much thanks for all your help with this! You've saved me weeks of frustration.

  12. #12
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've been able to get pretty far with the script as it is at
    http://www.public-health.uiowa.edu/p...k_chart/3.html but now I need to keep the entire row at the top of the T shape hidden until the user presses a button (http://www.public-health.uiowa.edu/p...k_chart/4.html).

    I'm looking for suggestions as to what I can do to show top-most row cells on the right side of the age group column on the x-axis, like a flipped upside down L shape, while keeping cells to the left hidden.

    I've tried hiding individual columns on the left by styling individual cols in a colgroup, but the display: none style is not overriding anything.

    Hope I've explained this without too much confusion. Thanks for any ideas.

  13. #13
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Made a few changes. I'm always confused.

    ...zip coming...
    Attached Files Attached Files
    Last edited by adios; Mar 5, 2004 at 13:41.
    ::: certified wild guess :::

  14. #14
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Made a few changes. I'm always confused.

    ...zip coming...
    Works great! Thanks for all your help. It's been quite educational.

  15. #15
    SitePoint Enthusiast mherring's Avatar
    Join Date
    Feb 2004
    Location
    Cedar Rapids, IA
    Posts
    40
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I've been able to edit and customize this fairly well up until now. Is there a way to 'lock' the cells that are assigned the className of 'hilite' by pushing the 'Submit Total' button?

    http://www.public-health.uiowa.edu/p...k_chart/1.html

    The idea is to have the user be able to further adjust the totals (and therefore the chart) after their final total is calculated, while keeping their final total cells and row visible.

    In other words, the upside down L shape would remain static and visible while all the other cells would still be showing and hiding based on the total.


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
  •