Toggle visibility of table rows and cells

**mherring** · Feb 25, 2004, 15:02

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.

**adios** · Feb 25, 2004, 16:16

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.

**mherring** · Feb 26, 2004, 08:56

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?

**adios** · Feb 26, 2004, 10:53

Did you mean columns & rows?

Please say YES.

**mherring** · Feb 26, 2004, 13:12

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!

**adios** · Feb 26, 2004, 23:13

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.

**mherring** · Feb 27, 2004, 08:58

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!

**adios** · Feb 27, 2004, 11:58

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.

**mherring** · Feb 27, 2004, 14:19

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!

**adios** · Feb 28, 2004, 14:51

OK, had another go at it. Still not sure I follow the methodology but that's nothing new. cya...

**mherring** · Mar 1, 2004, 08:58

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.

**mherring** · Mar 5, 2004, 10:39

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.

**adios** · Mar 5, 2004, 12:25

Made a few changes. I'm always confused.

...zip coming...

**mherring** · Mar 8, 2004, 11:14

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.

**mherring** · Mar 17, 2004, 08:22

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.

The SitePoint Forums have moved.

User Tag List

Thread: Toggle visibility of table rows and cells

Thread Tools

Display

Toggle visibility of table rows and cells

Bookmarks

Bookmarks

Posting Permissions