Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

toggle with table

Status
Not open for further replies.
benrob82

benrob82

Programmer
Jul 28, 2005
116
GB
Hi I'm trying to use the toggle function inside of a table but it will not allow me to do this any ideas why?

 
Sort by date Sort by votes
benrob82, if you want answers to your questions you really have to show us your code or we have no idea why any particular bit of code would be failing for you.


It's hard to think outside the box when I'm trapped in a cubicle.
 
Upvote 0 Downvote
sorry I here is the code

I need to be able to toggle a certain part of the table to hide certain search fields.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle_box(id) {
    var identity = document.getElementById(id);
    if(identity.style.display == "block" || identity.style.display == "")
    {
        identity.style.display="none";
    } else {
        identity.style.display="block";
    }
}
</script>
<title>Contacts Search</title>
<link rel="STYLESHEET" type="text/css" href="/mailapp/style.css">
</head>
<body leftmargin=5>
<br>
<hr>
<table width="80%" border="1" cellspacing="0" cellpadding="4" bordercolor="#C0C0C0" align="center">
  <form action="" method="post">
    <tr>
      <td colspan='4'><strong>Filter results</strong><a href="javascript:toggle_box('advanced')">Toggle!</a></td>
    </tr>
    <tr>
      <td width="15%" bgcolor='#F2F2F2'><strong>First Name </strong></td>
      <td width="35%" bgcolor='#F2F2F2'><input type="text" name="fname" value="<?php echo $fname ?>">
      </td>
      <td width="15%" bgcolor='#F2F2F2'><strong>Last Name </strong></td>
      <td width="35%" bgcolor='#F2F2F2'><input type="text" name="lname" value="<?php echo $lname ?>">
      </td>
    </tr>
    <tr>
      <td><strong>Email </strong></td>
      <td><input type="text" name="email" value="<?php echo $email ?>">
      </td>
      <td><strong>Job Title</strong></td>
      <td><input type="text" name="jobtitle" value="<?php echo $jobtitle ?>">
      </td>
    </tr>
    <div id="advanced" style="display: none">
      <tr>
        <td bgcolor='#F2F2F2'><strong>Company Name </strong></td>
        <td bgcolor='#F2F2F2'>
          <input type="text" name="oname" value="<?php echo $oname ?>">
        </td>
        <td bgcolor='#F2F2F2'><strong>Company Type</strong></td>
        <td bgcolor='#F2F2F2'>
          <select name="orgtype">
          </select>
        </td>
      </tr>
      <tr>
        <td><strong>Address</strong> </td>
        <td><input type="text" name="address" value="<?php echo $address ?>">
        </td>
        <td><strong>City </strong></td>
        <td><input type="text" name="city" value="<?php echo $city ?>">
        </td>
      </tr>
      <tr>
        <td bgcolor='#F2F2F2'><strong>County </strong></td>
        <td bgcolor='#F2F2F2'><input type="text" name="county" value="<?php echo $county ?>">
        </td>
        <td bgcolor='#F2F2F2'><strong>Membership Start Date</strong></td>
        <td bgcolor='#F2F2F2'><input type="text" name="start_date" value="<?php echo $start_date ?>">
&nbsp;
          <input type=button value="select" onclick="displayDatePicker('start_date');">
        </td>
      </tr>
      <tr>
        <td><strong>Primary Contact</strong></td>
        <td><input type="checkbox" name="primary" value="on"<?php	if ($primary != "")	{echo " checked ";}?>>
        </td>
        <td><strong>Paid Member</strong></td>
        <td><input type="checkbox" name="paid_mem" value="on"<?php if ($paid_mem != "") {echo " checked ";}?>>
        </td>
      </tr>
      <tr>
        <td bgcolor='#F2F2F2'><strong>Number of Results </strong></td>
        <td bgcolor='#F2F2F2'><input type="text" name="limit" value="500">
        </td>
        <td bgcolor='#F2F2F2'><strong>Group by Company</strong></td>
        <td bgcolor='#F2F2F2'><input type="checkbox" name="group" value="on"<?php if ($group != ""){echo " checked ";}?>>
        </td>
      </tr>
    </div>
    <tr>
      <td colspan='4'><input type="submit" value="Search">
&nbsp;
        <input type="button" onClick="parent.location='search.php'" value="Clear">
&nbsp;
        <input type="button" onClick="parent.location='export.php'" value="Export">
      </td>
    </tr>
  </form>
</table>
<hr>
<table width="80%" border="1" cellspacing="0" cellpadding="4" bordercolor="#C0C0C0" align="center">
  <tr>
    <!-- <td>&nbsp;</td> -->
    <td><strong>Name</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>Company</strong></td>
  </tr>
</table>
<br>
<br>
</body>
</html>
 
Upvote 0 Downvote
benrob, you cannot group rows together in a div like that. Not only is it symantically incorrect - but what you are trying to achieve will also not work.

The only way to toggle visibility for table rows is to change the display value of the table row itself. So, if you want 5 table rows to disappear when the button is clicked then you will have to change the value of each of the 5 rows individually. Or, if you don't mind sloppy code you could stick a whole new table in 1 row of the main table and toggle the visibility on just that row - however, I would never do that myself. It's just too messy. And a lot easier just to adjust your javascript function anyway.

This should work for you:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle_box(id) {
    var identity = document.getElementById(id);
    if(identity.style.display == "block" || identity.style.display == "")
    {
        identity.style.display="none";
    } else {
        identity.style.display="block";
    }
}

[!]function toggleAdvanced() {
   toggle_box("advanced1");
   toggle_box("advanced2");
   toggle_box("advanced3");
   toggle_box("advanced4");
   toggle_box("advanced5");
}
[/!]
</script>
<title>Contacts Search</title>
<link rel="STYLESHEET" type="text/css" href="/mailapp/style.css">
</head>
<body leftmargin=5>
<br>
<hr>
<table width="80%" border="1" cellspacing="0" cellpadding="4" bordercolor="#C0C0C0" align="center">
  <form action="" method="post">
    <tr>
      <td colspan='4'><strong>Filter results</strong><a href="javascript:[!]toggleAdvanced()[/!]">Toggle!</a></td>
    </tr>
    <tr>
      <td width="15%" bgcolor='#F2F2F2'><strong>First Name </strong></td>
      <td width="35%" bgcolor='#F2F2F2'><input type="text" name="fname" value="<?php echo $fname ?>">
      </td>
      <td width="15%" bgcolor='#F2F2F2'><strong>Last Name </strong></td>
      <td width="35%" bgcolor='#F2F2F2'><input type="text" name="lname" value="<?php echo $lname ?>">
      </td>
    </tr>
    <tr>
      <td><strong>Email </strong></td>
      <td><input type="text" name="email" value="<?php echo $email ?>">
      </td>
      <td><strong>Job Title</strong></td>
      <td><input type="text" name="jobtitle" value="<?php echo $jobtitle ?>">
      </td>
    </tr>
    [!][s]<div>[/s][/!]
   
   <tr [!]id="advanced1"[/!]>
     <td bgcolor='#F2F2F2'><strong>Company Name </strong></td>
     <td bgcolor='#F2F2F2'>
       <input type="text" name="oname" value="<?php echo $oname ?>">
     </td>
     <td bgcolor='#F2F2F2'><strong>Company Type</strong></td>
     <td bgcolor='#F2F2F2'>
       <select name="orgtype">
       </select>
     </td>
   </tr>
   <tr [!]id="advanced2"[/!]>
     <td><strong>Address</strong> </td>
     <td><input type="text" name="address" value="<?php echo $address ?>">
     </td>
     <td><strong>City </strong></td>
     <td><input type="text" name="city" value="<?php echo $city ?>">
     </td>
   </tr>
   <tr [!]id="advanced3"[/!]>
     <td bgcolor='#F2F2F2'><strong>County </strong></td>
     <td bgcolor='#F2F2F2'><input type="text" name="county" value="<?php echo $county ?>">
     </td>
     <td bgcolor='#F2F2F2'><strong>Membership Start Date</strong></td>
     <td bgcolor='#F2F2F2'><input type="text" name="start_date" value="<?php echo $start_date ?>">
&nbsp;
       <input type=button value="select" onclick="displayDatePicker('start_date');">
     </td>
   </tr>
   <tr [!]id="advanced4"[/!]>
     <td><strong>Primary Contact</strong></td>
     <td><input type="checkbox" name="primary" value="on"<?php    if ($primary != "")    {echo " checked ";}?>>
     </td>
     <td><strong>Paid Member</strong></td>
     <td><input type="checkbox" name="paid_mem" value="on"<?php if ($paid_mem != "") {echo " checked ";}?>>
     </td>
   </tr>
   <tr [!]id="advanced5"[/!]>
     <td bgcolor='#F2F2F2'><strong>Number of Results </strong></td>
     <td bgcolor='#F2F2F2'><input type="text" name="limit" value="500">
     </td>
     <td bgcolor='#F2F2F2'><strong>Group by Company</strong></td>
     <td bgcolor='#F2F2F2'><input type="checkbox" name="group" value="on"<?php if ($group != ""){echo " checked ";}?>>
     </td>
   </tr>
    [!][s]</div>[/s][/!]
    <tr>
      <td colspan='4'><input type="submit" value="Search">
&nbsp;
        <input type="button" onClick="parent.location='search.php'" value="Clear">
&nbsp;
        <input type="button" onClick="parent.location='export.php'" value="Export">
      </td>
    </tr>
  </form>
</table>
<hr>
<table width="80%" border="1" cellspacing="0" cellpadding="4" bordercolor="#C0C0C0" align="center">
  <tr>
    <!-- <td>&nbsp;</td> -->
    <td><strong>Name</strong></td>
    <td><strong>Email</strong></td>
    <td><strong>Company</strong></td>
  </tr>
</table>
<br>
<br>
</body>
</html>

-kaht

[small]How spicy would you like your chang sauce? Oh man... I have no idea what's goin' on right now...[/small]
[banghead]
 
Upvote 0 Downvote
hey thanks that worked great, think i need to start studying some javascript.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
347
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
356
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
320
coldbohemia
coldbohemia
TheLazyPig
  • Locked
  • Question
Copy details of searched reference to table using Angular JS
Replies
0
Views
84
TheLazyPig
TheLazyPig
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
111
ggriffit
ggriffit

Part and Inventory Search

Sponsor

Back
Top