SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jun 2003
    Location
    India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide multiple table rows using Checkbox

    Hi,

    I have the following file..

    <html>
    <head>

    <script LANGUAGE="JavaScript">

    function showhide(CB){
    alert (frm.advsrch.Checked)
    if(CB.Checked)
    for(i=1; i<7; i++)
    {
    document.all.div(i).style.display ='';
    }
    else
    for(var i=1; i<7; i++)
    {
    document.all.div1.style.display ='none';
    }
    return false;
    }

    </script>
    </head>

    </head>


    <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td width="100%">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td width="50%" valign="top">
    <form action="search.htm" method="post" id="frm">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="AutoNumber4" class="table_background">
    <tr>
    <td width="19%" height="10" colspan="2"></td>
    <td width="71%" height="10"></td>
    </tr>
    <tr id="div1">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Division /td>
    <td width="71%">
    <select name="search_division">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option><select></td>
    </tr>
    <tr id="div2">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Project Name/td>
    <td width="71%">
    <select name="search_project">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option></select></td>
    </tr>
    <tr id="div3">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Location /td>
    <td width="71%">
    <select name="search_country">
    <option value="0" selected>Any</option>
    <option>ABCD</option></select></td>
    </tr>
    <tr id="div3">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Phase /td>
    <td width="71%">
    <select name="search_phase">
    <option value="0">Any</option></select></td>
    </tr>
    <tr id="div4">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Department /td>
    <td width="71%">
    <select name="search_department">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option></select></td>
    </tr>
    <tr id="div5">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Date /td>
    <td width="71%">
    <select name="search_date">
    <option value="0">Any date</option>
    <option value="1">Since Yesterday</option>
    </select></td>
    </tr>
    <tr id="div6">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Show</td>
    <td width="71%"><select name="search_lesson_complete">
    <option value="2">Both complete and incomplete lessons</option>
    <option value="1">only completed lessons</option>
    <option value="0">only incomplete lessons</option>
    </select></td>
    </tr>
    <tr>
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Keyword /td>
    <td width="71%">
    <input type="text" name="search_keyword" size="40">&nbsp;
    <input onclick=showhide(this); name=advsrch type=checkbox id=advsrch value="1">
    <span class="text_bold">&nbsp;Advanced Search</span></td>
    </tr>
    <tr>
    <td width="2%" height="30">&nbsp;</td>
    <td width="17%" height="30">&nbsp;</td>
    <td width="71%" height="30">
    <input type="submit" value="Search" name="B1"> </td>
    </tr>
    <tr>
    <td width="19%" height="10" colspan="2"></td>
    <td width="71%" height="10">
    </td>
    </table>
    </div>
    </form>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </center>
    </body>
    </html>

    In this table, i want to hide all rows except the "search_keyword" row and if i click the advanced search Checkbox, i want all other rows above to be displayed. I have marked all these above rows using ids div1, div2...

    Also, When i uncheck the checkbox, i want to hide the rows above search_keyword row and also reset the value of dropdown values to their initial values...

    Please help me to solve this....

    many thanks in advance
    thiru

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi thiruna...

    This is probably better done with CSS display (instead of visibility). I put the hide/show rows below the search box/checkbox to keep them stable.
    Code:
    <html>
    <head>
    <style type="text/css">
    
    tr.toggleable {
                   display: none;
                  }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    function showhide(oCheckbox) {
         var oForm = oCheckbox.form, bWhich = oCheckbox.checked;
         var tr, i = 0, table = document.getElementById('AutoNumber4');
         var toggles = table.getElementsByTagName('tr');
         while (tr = toggles.item(i++))
                if (tr.className == 'toggleable') 
                    tr.style.display = (bWhich) ? 'block' : 'none';
         if (!bWhich) oForm.reset();
    }
    
    </script>
    </head>
    <div align="center">
    <center>
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td width="100%">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td width="50%" valign="top">
    <form action="search.htm" method="post" id="frm">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="AutoNumber4" class="table_background">
    <tr>
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Keyword :</td>
    <td width="71%">
    <input type="text" name="search_keyword" size="40">&nbsp; 
    <input type="checkbox" name="advsrch" id="advsrch" value="1" onclick="showhide(this)"> 
    <span class="text_bold">&nbsp;Advanced Search</span></td>
    </tr>
    <tr>
    <td width="2%" height="30">&nbsp;</td>
    <td width="17%" height="30">&nbsp;</td>
    <td width="71%" height="30">
    <input type="submit" value="Search" name="B1"> </td>
    </tr>
    <tr>
    <td width="19%" height="10" colspan="2"></td>
    <td width="71%" height="10">
    </td>
    </tr>
    <tr class="toggleable">
    <td width="19%" height="10" colspan="2"></td>
    <td width="71%" height="10"></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Division :</td>
    <td width="71%">
    <select name="search_division">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option><select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Project Name:</td>
    <td width="71%">
    <select name="search_project">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option></select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Location :</td>
    <td width="71%">
    <select name="search_country">
    <option value="0" selected>Any</option>
    <option>ABCD</option></select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Phase :</td>
    <td width="71%">
    <select name="search_phase">
    <option value="0">Any</option></select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Department :</td>
    <td width="71%">
    <select name="search_department">
    <option value="0" selected>Any</option>
    <option Value="1">ABCD</option></select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Date :</td>
    <td width="71%">
    <select name="search_date">
    <option value="0">Any date</option>
    <option value="1">Since Yesterday</option>
    </select></td>
    </tr>
    <tr class="toggleable">
    <td width="2%" class="text_bold">&nbsp;</td>
    <td width="18%" class="text_bold">Show</td>
    <td width="71%"><select name="search_lesson_complete">
    <option value="2">Both complete and incomplete lessons</option>
    <option value="1">only completed lessons</option>
    <option value="0">only incomplete lessons</option>
    </select></td>
    </tr>
    </table>
    </div>
    </form>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </center>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Jun 2003
    Location
    India
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate,

    It works perfect....Thanks agn . for your help.

    thiru


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
  •