C# .NET / javascript : Collapsable Table Rows - what about this is wrong?

StackOverflow https://stackoverflow.com/questions/150124

  •  02-07-2019
  •  | 
  •  

Question

I have a C# .NET page where I want to make rows collapse when a button is pressed. I found many tutorials like this one (http://codingforums.com/archive/index.php?t-90375.html), tried to implement their solutions, but none of them do anything for me when I click my button. To make sure I wasn't going crazy, I made a small test page just to see if the idea works. For some reason, it isn't. The browser is IE6. I'm running Visual Studio 2005. Does anyone have any idea why this isn't working? The rendered page shows a button and a line of text as I would expect; the line of text does not disappear when I click the button. I know I could use divs, but remember this is just a proof of concept; in my real application it is table rows that must collapse.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="Project.Web.Auth.Test" %>
<!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" >
<head id="Head1" runat="server">
    <title>Shop Financials</title>
    <link href="../StyleSheets/ClaimsV2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">     


        function btnClick(control)
        {   
            try
            {
                var id_table = document.getElementById(control).style;

                if(id_table.display == "block") 
                {
                   id_table.display = "none";
                }
                else 
                {
                    id_table.display = "block";
                }
            }
            catch(e)
            {
                alert(e);
            }   
       }

       function toDepositPrinterFriendly()
       {

       }

  </script>
</head>
<body>
    <form id="form1" runat="server">

    <table>
    <tr>
    <td><asp:Button runat="server" OnClientClick="javascript:btnClick('HeaderRow')"/></td>

    </tr>
    <tr id="HeaderRow" runat="server">
    <td>TEST2</td>

    </tr>    


    </table>

    </form>
</body>
</html>
Was it helpful?

Solution

1) The display is (probably) not 'block' initially. Try:

if(id_table.display == 'none') 
{
  id_table.display = '';
}
else 
{
  id_table.display = 'none';
}

2) The id of the control will not be what you think it is, thanks to Naming Containers. Check your HTML Source

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top