SitePoint Sponsor |
|
User Tag List
Results 1 to 15 of 15
-
Feb 25, 2004, 16:02 #1
- 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.
-
Feb 25, 2004, 17:16 #2
- 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> .......... ..........
Last edited by adios; Feb 26, 2004 at 01:49.
::: certified wild guess :::
-
Feb 26, 2004, 09:56 #3
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
Is there a similar way to toggle both cells and rows?Last edited by mherring; Feb 26, 2004 at 11:30.
-
Feb 26, 2004, 11:53 #4
- 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 :::
-
Feb 26, 2004, 14:12 #5
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
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!
-
Feb 27, 2004, 00:13 #6
- 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.
::: certified wild guess :::
-
Feb 27, 2004, 09:58 #7
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
-
Feb 27, 2004, 12:58 #8
- 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 :::
-
Feb 27, 2004, 15:19 #9
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
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!
-
Feb 28, 2004, 15:51 #10
- 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...
Last edited by adios; Feb 28, 2004 at 23:04.
::: certified wild guess :::
-
Mar 1, 2004, 09:58 #11
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
-
Mar 5, 2004, 11:39 #12
- 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.
-
Mar 5, 2004, 13:25 #13
- 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...Last edited by adios; Mar 5, 2004 at 14:41.
::: certified wild guess :::
-
Mar 8, 2004, 12:14 #14
- Join Date
- Feb 2004
- Location
- Cedar Rapids, IA
- Posts
- 40
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by adios
-
Mar 17, 2004, 09:22 #15
- 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