Show/Hide Table Problem

Question

feoperro

14 Years Ago

Hi,

I'm trying to write a script where I can click an image to hide a table, then hide the table and change the image. Then if I click the image again, it should show the table and change the image to the initial image. Below is the code I have so far:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title></title>
    </head>

    <body>
        <script LANGUAGE="JavaScript">
            function showHideTable() {
                if (document.getElementById.("showHide").src == "Hide Table.bmp") {
                    document.getElementById("TableRow").style.display = '';
                    document.getElementById("showHide").src = "Show Table.bmp";
              } else {
                  document.getElementById("TableRow").style.display = 'none';
                  document.getElementById("showHide").src = "Hide Table.bmp";
                }
            }
        </script>
        <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">

        <table border=1 cellpadding=4 CELLSPACING=0>
            <tr>
                <td>ROW 2 - HEADER</td>
            </tr>
            <tbody id="TableRow" style="display:none">
                <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
                <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
            </tbody>
        </table>

    </body>
</html>

Thanks,
Ashton.

image javascript

3 Contributors
10 Replies
245 Views
1 Day Discussion Span
Latest Post 14 Years Ago Latest Post by feoperro

Taywin 312 Posting Virtuoso

14 Years Ago

The problem is the way you get image source (document.getElementById.("showHide").src == "Hide Table.bmp")). The return value may include all the domain name, so it will never be equal to what you are trying to do. You can try...

if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) {
}

rajbdilip 0 Newbie Poster

14 Years Ago

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
     
    <html>
     
    <head>
    <title></title>
    </head>
     
    <body>
    <script LANGUAGE="JavaScript">
    
    function showHideTable() 
	{
		var control=document.getElementById('showHide');
		var control2=document.getElementById('TableShowHide');
		if (control2.style.visibility == "hidden")
		{
			control2.style.visibility == "visible";
			contorl.src="Hide Table.bmp";
		}
		
		else
		{
			control2.style.visibility == "hidden";
			contorl.src="Show Table.bmp";
		}
	}
    </script>
    <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">
     
    <table id="TableShowHide" border=1 cellpadding=4 CELLSPACING=0>
    <tr>
    <td>ROW 2 - HEADER</td>
    </tr>
    <tbody id="TableRow" style="display:none">
    <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
    <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
    </tbody>
    </table>
     
    </body>
    </html>

Try this code... I have not tested this code but it is supposed to work.

Taywin 312 Posting Virtuoso

14 Years Ago

What browser are you using? I am guessing you are using IE. It is a known bug that IE does not allow you to dynamically change the value of visibility via JavaScript. The way to workaround this is to use CSS. Create a class in CSS for show and hide, then use JavaScript to swap the class name.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

feoperro · Answer 1 · 2010-11-05T18:55:18+00:00

Hi,

Thanks a lot - There seems to be an issue when using the "visibility" argument in an IF statement. At least I think that's the problem... I changed your code a bit so it was more precise but it doesn't seem to work. hmm..

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script LANGUAGE="JavaScript">
            function showHideTable() {
                var control=document.getElementById('showHide');
                var control2=document.getElementById('TableShowHide');

                if (control2.style.visibility == "hidden") {
                    control2.style.visibility == "visible";
                    control.src="Hide Table.bmp";
                }
                else if (control2.style.visibility == "visible") {
                    control2.style.visibility == "hidden";
                    control.src="Show Table.bmp";
                }
            }
        </script>

        <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()" alt="Show/Hide">

        <table id="TableShowHide" border=1 cellpadding=4 CELLSPACING=0>
            <tr>
                <td>ROW 2 - HEADER</td>
            </tr>
            <tbody id="TableRow" style="display:none">
                <tr>
                    <td colspan="2">ROW 2 SubDATA...</td>
                </tr>
                <tr>
                    <td colspan="2">ROW 2 SubDATA1...</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

feoperro · Answer 2 · 2010-11-05T21:48:30+00:00

Hi Taywin,

Ya I'm testing it with IE at the moment - I'm not really sure I catch you - do you mean use the example that you posted above?

The problem is the way you get image source (document.getElementById.("showHide").src == "Hide Table.bmp")). The return value may include all the domain name, so it will never be equal to what you are trying to do. You can try...
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) {}if (document.getElementById.("showHide").src.match(/Hide[^\.]*\.bmp/i)) {
}

Thanks,
Ashton.

Taywin 312 Posting Virtuoso · Answer 3 · 2010-11-06T01:22:24+00:00

Ashton:

Yes and no. Yes if you are keeping your original format. No if you want a better improvement.

1)You should put script inside head tag even though there is nothing wrong putting it in the body tag.
2)You should put style tag inside head tag as well.
3)The way you do would not work if both of your images have not been loaded on the page already. You could load them up and hide them somewhere in the page, and then use the tag you are working to show it. Or you dynamically change the DOM, but that may be slow for big image.

I modified your code as below...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
  <title></title>

  <style type="text/css">
  .hideImg {
    display: none;
    visibility: hidden;
  }
/* You do not really need this showImg class, but I put in just be more intuitive */
/* If you want to display, just give no class name to the image */
  .showImg {
  }
  </style>

  <script LANGUAGE="JavaScript">
  function showHideTable() {
    if (document.getElementById.("showHide").className.match(/hideimg/i)) {
      document.getElementById("TableRow").className = "";
      document.getElementById("showHide").src = "Show Table.bmp";
    } else {
      document.getElementById("TableRow").className = "hideImg";
      document.getElementById("showHide").src = "Hide Table.bmp";
    }
  }
  </script>
</head>

<body>
  <img id="showHide" src="Hide Table.bmp" onclick="showHideTable()">
  <table border=1 cellpadding=4 CELLSPACING=0>
  <tr>
    <th>ROW 2 - HEADER</th>
  </tr>
  <tbody id="TableRow" style="display:none">
    <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
    <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
  </tbody>
  </table>

<!-- add this image for preload when you swap image later -->
<div class="hideImg">
<img src="Show Table.bmp">
<img src="Hide Table.bmp">
</div>
</body>
</html>

feoperro · Answer 4 · 2010-11-06T04:42:59+00:00

Thanks man, lol I've been bustin' my brains over this for a few hours now, just can't seem to get it... I just basically wanna have a button that shows and hides a table. for "hide table" it has an upArrow picture and for "show table" it has a downArrow picture basically...

feoperro · Answer 5 · 2010-11-06T04:49:00+00:00

I'm thinking something along the lines of:

function changeVisibility() { 

}

function changePicture() {

}

Then just call them both the traditional:

OnClick="ChangeVisibility(); ChangePicture();"

What you think?

Taywin 312 Posting Virtuoso · Answer 6 · 2010-11-06T05:33:49+00:00

You may break down the function into 2 functions if you want, but you need to deal with them properly.

The problem with visibility is what you are encountering in IE. IE has problem with changing style.visibility dynamically. Also, for style.display, it hide the display but the element is still in place! In other words, if you are displaying something in the middle of the page, and you use style.display="none", the element is hidden but there will be a blank in the middle of your page. The visibility is what should be used. Though, display is a fall back sometimes.

feoperro · Answer 7 · 2010-11-06T18:50:45+00:00

Hey guys,

I finally got it - if anyone else is looking for the source; I pasted it below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>
        <title></title>
    </head>

    <body>
        <script language="javascript" type="text/javascript">
            function toggle(item) {
                obj = document.getElementById(item);
                buttonPicture = document.getElementById('showHide');
                visible = (obj.style.display != "none");
                if(visible){
                    obj.style.display = "none";
                    buttonPicture.src = "Show Table.bmp"
                } else {
                    obj.style.display = "block";
                    buttonPicture.src = "Hide Table.bmp"
                }
            }
        </script>
        <img id="showHide" src="Hide Table.bmp" onclick="toggle('TableRow')">

        <table border=1 cellpadding=4 CELLSPACING=0>
            <tr>
                <td>ROW 2 - HEADER</td>
            </tr>
            <tbody id="TableRow">
                <tr><td colspan="2">ROW 2 SubDATA...</td></tr>
                <tr><td colspan="2">ROW 2 SubDATA1...</td></tr>
            </tbody>
        </table>

    </body>

</html>