Question on Hide and Show Toggles in Tables

Page 1 of 1

5 Replies - 413 Views - Last Post: 22 May 2012 - 08:33 PM

#1 rtvinfotech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-May 12

Question on Hide and Show Toggles in Tables

Posted 21 May 2012 - 07:22 AM

I need to Toggle , by Show and Hide by a Single Hyper Link in between a Table like this, Actually i am able to do it in ASP.Net but I need it in HTML Page

For a <P> </P> , i am able to do it , but when the code is present inside a table then problem persists.
Java Script is generating a Problem.



I tried 
function toggleMe(a)
{
	var e=document.getElementById(a);
	if(!e)return true;
	alert(e.style.display);
	if(e.style.display=="none")
	{
	e.style.display="block";
	}
	else
	{
	e.style.display="none";
	}
	return true;
}


This java Script

HTML as

<table>
<tr>
<td>
<a href="#" onclick="return toggleMe('QueryOptions')">QueryOptions</a><br>
</tr>
</td>
<tr><td>
		<br/>Something
		
		</td></tr>

<div id="QueryOptions" >
------------------------------------
</div>

</td>
</tr>

<div>

</div>
</table>


Is This A Good Question/Topic? 0
  • +

Replies To: Question on Hide and Show Toggles in Tables

#2 CTphpnwb  Icon User is online

  • D.I.C Lover
  • member icon

Reputation: 2486
  • View blog
  • Posts: 8,530
  • Joined: 08-August 08

Re: Question on Hide and Show Toggles in Tables

Posted 21 May 2012 - 07:38 AM

PHP is not Javascript. Moving this there.
Was This Post Helpful? 0
  • +
  • -

#3 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Question on Hide and Show Toggles in Tables

Posted 21 May 2012 - 11:16 AM

Looks like mostly miss-nested table-tr-td tag combinations.
Try this...
<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
//<![CDATA[
function toggleMe(a) {
  var e=document.getElementById(a);    if(!e)return true;
  e.style.display = (e.style.display == 'none') ? 'block' : 'none';
  return false;
}

//]]>
</script>

</head>
<body>
<table>
 <tr>
  <td>
   <a href="#" onclick="return toggleMe('QueryOptions')">QueryOptions</a>
  </td>
 </tr>
 <tr>
  <td>
   Something
  </td>
 </tr>
 <tr>
  <td>
   <div id="QueryOptions" > ------------------------------------ </div>
  </td>
 </tr>
 <tr>
  <td>
   Something else
  </td>
 </tr>
</table>

</body>
</html>

:bananaman:

This post has been edited by JMRKER: 21 May 2012 - 11:16 AM

Was This Post Helpful? 1
  • +
  • -

#4 rtvinfotech  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 21-May 12

Re: Question on Hide and Show Toggles in Tables

Posted 21 May 2012 - 11:14 PM

Actually this code is working in Chrome Browser , but it showing no Functionality in Internet Explorer.
Can You send the code for it to work in Internet Explorer
Was This Post Helpful? 0
  • +
  • -

#5 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Question on Hide and Show Toggles in Tables

Posted 22 May 2012 - 08:55 AM

View Postrtvinfotech, on 22 May 2012 - 12:14 AM, said:

Actually this code is working in Chrome Browser , but it showing no Functionality in Internet Explorer.
Can You send the code for it to work in Internet Explorer


I'll need to test this tonight as I am not near a PC with MSIE on it at this time.

In the meantime, you could try adding <tbody> tags, as in:
<table>
 <tbody>
...
 </tbody>
</table>

MSIE seems a bit of a stickler about their tables.
Other suggestion until tonight would be to try changing your <!DOCTYPE ...> assignment
to be sure the 'quirks' mode is not causing some inconsistencies.
Was This Post Helpful? 0
  • +
  • -

#6 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 115
  • View blog
  • Posts: 748
  • Joined: 25-October 08

Re: Question on Hide and Show Toggles in Tables

Posted 22 May 2012 - 08:33 PM

Tested with the following on MSIE and appears to work like other browsers.
Be sure to answer "YES" to the question "Allow blocked content" if you run the script locally.
<!DOC HTML>
<html>
<head>
<title> Untitled </title>
<script type="text/javascript">
//<![CDATA[
function toggleMe(a) {
  var e=document.getElementById(a);    if(!e)return true;
  e.style.display = (e.style.display == 'none') ? 'block' : 'none';
  return false;
}

//]]>
</script>

</head>
<body>
<table>
 <tbody>
 <tr>
  <td>
   <a href="#" onclick="return toggleMe('QueryOptions')">QueryOptions</a>
  </td>
 </tr>
 <tr>
  <td>
   Something
  </td>
 </tr>
 <tr>
  <td>
   <div id="QueryOptions" > ------------------------------------ </div>
  </td>
 </tr>
 <tr>
  <td>
   Something else
  </td>
 </tr>
 </tbody>
</table>

</body>
</html>

Was This Post Helpful? 1
  • +
  • -
Page 1 of 1