Get table id in .Net code
I have two tables in a web form. By clicking a button, I want to hide it and show another. I gave them and Id and I want to set tables style = "display:"
I tried this in javaScript using the function and document.getelementbyid (id) .style.display = 'none' but it didn't work.
any ideas?
Decision:
OnClientClick="javascript: tbl2.style.display='';tbl1.style.display='none';return false;"
a source to share
I'm assuming your tables are .net controls? If so, then passing the "id" is not enough, since .net does not assign the same server ID as the client side ID.
You need to access the ClientID property on the .net management server to get its real ID on the client side:
MyButton.OnClientClick = string.Format("{0}.style.display=''", ControlIWantToHide.ClientID);
The above code shows how you will attach some javascript (please don't call it java!) To the .net asp: button MyButton and then click on the client side ControlIWantToHide control .
Note: The above may need tweaking to get it to work in all browsers, but the .net stuff is an important factor here and I suspect ClientID is what you need all the time.
Based on your responses to comments, the items you toggle are not .net controls, but the button that launches them is like this: (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 can trigger an element switcher on your page by adding a javascript event handler to the server:
MyButton.OnClientClick = "Show(tbl1);Hide(tbl2);return false;";
.. which will display the element with id tbl1 and hide it with tbl2 . This will work if the items you are switching are not .net controls, that is, they do not have a runat = "server" attribute. Remember, even if you add javascript code to the asp: button on the server, it only runs on the client when it clicks. Remember to return "false" as shown above to stop the default asp: post-back behavior.
a source to share
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 is unique, I noticed that you gave the tr element the name "tbl1" in your sample code. Only tables must have ID
Edit: This will work for hiding Tr instead (just give tr a unique id and use the same approach). However, I believe that if there is a click event on the table, you will not be able to reach the onclick event on the row, so you will have to use one or the other.
a source to share
Asp.net will change the id of any server tag using run = "server". If you are trying to hide them with javascript, you will have to use an id that is pulled by asp.net (this can be seen with the view source). Alternatively, you can wrap the table in a div and show / hide the div using your normal method.
If you are using an asp: Table and are trying to hide the table in the code behind, you can use the .Visible property to achieve the same effect on postbacks.
a source to share