Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Show/hide table rows, overlapping groups...

    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...)
    Last edited by stefanoperfili; 03-26-2008 at 03:39 PM. Reason: Forgot to mention CSS classes!

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by stefanoperfili
    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 ) while posting here.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I haven't really got any code for it, maybe something like this:

    Code:
    <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>

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • The Following 2 Users Say Thank You to vwphillips For This Useful Post:

    abduraooft (03-26-2008), stefanoperfili (03-27-2008)

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Uncaught exception! too many zxcs, memory overflow-- operation aborted
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    // 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.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #8
    New to the CF scene
    Join Date
    May 2007
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    missunderstood the requirement

    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

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