Get table Id in code in .Net - asp.net

Question

I have two tables on a webform. On a button click I want to hide one and show the other. I gave them both an Id and I want to set the tables' style="display:"
I tried this in javaScript using a function and document.getelementbyid(id).style.display='none' but it did not work.
any ideas?
Solution:
OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"

Answer 1

I am assuming your tables are .net controls? If so, passing 'id' is not enough as .net does not assign the same server id as client-side id.
You need to access the ClientID property of the .net control server-side to get it's real client-side id:
MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);
The above code shows how you would attach some javascript (please don't call it java!) to a .net asp:button called MyButton and then have a client-side click on that hide a control called ControlIWantToHide.
Note: the above may need tweaking to make it work across all browsers but the .net stuff is the important factor here and I suspect the ClientID is what you needed all along.
Based on your responses to comments, the elements you are toggling are not .net controls but the button triggering them is, so: (based on the function posted by ebrown):
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
You could trigger the toggle of an element in your page by attaching the javascript event handler server-side:
MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";
..which will display the element with id tbl1 and hide the one with tbl2. This will work providing the elements you are toggling are not .net controls - ie, they do not have the runat="server" attribute. Remember, even though you are adding the javascript code to the asp:button on the server, it is only getting executed on the client when they click. Don't forget to return 'false' as shown above to stop the default post-back behaviour of the asp:button.

Answer 2

I think this should get you on the right track:
<table id="tbl1" onclick="javascript:show('tbl2');hide('tbl1');" >
<tr>
<td>
table 1 stuff
</td>
</tr>
</table>
<table id="tbl2" onclick="javascript:show('tbl1');hide('tbl2');">
<tr>
<td>
table 2 stuff
</td>
</tr>
</table>
<script type="text/javascript">
function hide(id)
{
var element = document.getElementById(id);
element.style.display='none';
}
function show(id)
{
var element = document.getElementById(id);
element.style.display='block';
}
</script>
Also make sure your ID's are unique, I noticed you gave a tr element the name 'tbl1' in your example code. Only the tables need to have the Id's
Edit: this will work for hiding Tr's instead (Just give the tr a unique id and use the same approach). However I believe if a table has an on click event you won't be able to reach the row's onclick event, so you will have to use one or the other.

Answer 3

Asp.net will change the id of any server tag using run="server". If you're trying to hide them using javascript you will have to use the id that asp.net spits out (You can see this using view source). Alternatively you could wrap the table in a div and show/hide the div with your usual method.
If you're using an asp:Table and trying to hide the table in the code behind you can use the .Visible property to achieve the same effect on postback.

Answer 4

Use document.getelementbyid(id).style.display="none" to hide
and document.getelementbyid(id).style.display="block" to show

Answer 5

If these are purely html based tables and not then try using -
document.getElementsByName('table1')[0].style.visibility='hidden';
or
document.getElementsByName('table1')[0].style.visibility='visible';