...

View Full Version : Show/hide table rows, overlapping groups...



stefanoperfili
03-26-2008, 04:10 PM
Hey, basically my situation is this...

There are many tables with many rows as <tr>.
Some of these rows are 'A'.
Some of these rows are 'B'.
Some of these rows are both 'A' and 'B'.
Some of them are neither.

At the top, there would be two checkboxes, one for 'A' and one for 'B'. Usually all rows show by default, but...
When either one of the checkboxes are checked, only the respective table rows are shown, the rest are hidden.
When they are both checked, ONLY the rows that contain BOTH 'A' and 'B' are shown.

Would be great to identify the rows with CSS classes...

I've been looking around heaps for a script that can do this, but I can't find anything :( ... None of the scripts can cater for overlaps.

If anyone can get me started with a basic script or at least show me what I need to learn, that would be great!

Thanks

(If it makes it easier for anyone to understand, it's for a menu that contains many vegan and gluten-free options, I want to cancel out the options more easily for those people who can't have gluten etc...)

abduraooft
03-26-2008, 04:15 PM
There are many tables with many rows as <tr>. I see nothing, post your code and don't forget to wrap your code by [CODE] (using http://www.codingforums.com/images/editor/code.gif) while posting here.

stefanoperfili
03-26-2008, 04:26 PM
I haven't really got any code for it, maybe something like this:



<form>

<label><input type="checkbox" onclick="..."> hide non-A</label>
<label><input type="checkbox" onclick="..."> hide non-B</label>

<table>
<th>Menu items</th>

<tr class="j_show_a"><td>item one (A)</td></tr>
<tr class="j_show_a j_show_b"><td>item two (A) (B)</td></tr>
<tr><td>item three</td></tr>
<tr class="j_show_b"><td>item four (B)</td></tr>
<tr><td>item five</td></tr>
<tr class="j_show_a j_show_b"><td>item six (A) (B)</td></tr>
<tr class="j_show_a"><td>item seven (A)</td></tr>
<tr class="j_show_b"><td>item eight (B)</td></tr>

</table>

</form>

abduraooft
03-26-2008, 04:44 PM
Basically Object.style.display='none'/'block' will do the trick, but I'm afraid it has some problems on table rows. Start from http://www.w3schools.com/htmldom/prop_style_display.asp

vwphillips
03-26-2008, 05:29 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcTableRows(zxccb,zxcid){
var zxctable=document.getElementById(zxcid);
if (!zxctable.cbs) zxctable.cbs=[];
if (!zxccb.set){ zxccb.set=true; zxctable.cbs.push(zxccb); }
var zxcreg='';
for (var zxc0=0;zxc0<zxctable.cbs.length;zxc0++){
if (zxctable.cbs[zxc0].checked) zxcreg+=zxctable.cbs[zxc0].value;
}
zxcreg=(zxcreg=='')?null:zxcreg;
var zxcrows=zxctable.rows;
for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
zxcrows[zxc0].style.display=(zxcreg)?'none':'';
if (zxcreg&&zxcrows[zxc0].className&&zxcreg.indexOf(zxcrows[zxc0].className)>-1&&zxcrows[zxc0].className.length==zxcreg.length){
zxcrows[zxc0].style.display='';
}
}
}
/*]]>*/
</script></head>

<body>
<input type="checkbox" name="" value="A" onclick="zxcTableRows(this,'tst');"/>
<input type="checkbox" name="" value="B" onclick="zxcTableRows(this,'tst');"/>
<table id="tst" border="1">
<tr class="A">
<td>A</td>
</tr>
<tr class="B">
<td>B</td>
</tr>
<tr class="A">
<td>A</td>
</tr>
<tr class="AB">
<td>AB</td>
</tr>
<tr >
<td>C</td>
</tr>
</table>
</body>

</html>

abduraooft
03-26-2008, 05:42 PM
:eek: Uncaught exception! too many zxcs, memory overflow-- operation aborted :D

vwphillips
03-26-2008, 06:14 PM
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts.
// These characters may be changed to characters of choice using global find and replace.

stefanoperfili
03-27-2008, 01:26 AM
Thanks for pointing me in the right direction abduraooft, and thanks for that great code, vwphillips!

'AB' doesn't appear when the 'A' or 'B' checkboxes are selected, but I'm sure that I can work it out with a bit of reading and tinkering.

Cheers

vwphillips
03-27-2008, 12:14 PM
missunderstood the requirement


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcTableRows(zxccb,zxcid){
var zxctable=document.getElementById(zxcid);
if (!zxctable.cbs) zxctable.cbs=[];
if (!zxccb.set){ zxccb.set=true; zxctable.cbs.push(zxccb); }
var zxcreg='';
for (var zxc0=0;zxc0<zxctable.cbs.length;zxc0++){
if (zxctable.cbs[zxc0].checked) zxcreg+=zxctable.cbs[zxc0].value;
}
zxcreg=(zxcreg!='')?new RegExp('['+zxcreg+']'):null;
var zxcrows=zxctable.rows;
for (var zxc0=0;zxc0<zxcrows.length;zxc0++){
zxcrows[zxc0].style.display=(zxcreg)?'none':'';
if (zxcreg&&zxcrows[zxc0].className&&zxcreg.test(zxcrows[zxc0].className)){
zxcrows[zxc0].style.display='';
}
}
}
/*]]>*/
</script></head>

<body>
<input type="checkbox" name="" value="A" onclick="zxcTableRows(this,'tst');"/>
<input type="checkbox" name="" value="B" onclick="zxcTableRows(this,'tst');"/>
<table id="tst" border="1">
<tr class="A">
<td>A</td>
</tr>
<tr class="B">
<td>B</td>
</tr>
<tr class="A">
<td>A</td>
</tr>
<tr class="AB">
<td>AB</td>
</tr>
<tr >
<td>C</td>
</tr>
</table>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum