CODEWITHSUNDEEP
javascriptc#htmlasp.net
JCunning
JCunning

Reputation: 9

How to hide an HTML table on page load

I am wondering if there is a way to hide an HTML table upon page load of a website. I am converting a page that was written in ASP a few years ago, and was wondering if I could match the site, but re-write it in .NET. Maybe it could be a JavaScript fix, but I was hoping there could be a work-around in C#. Here is the code that I am re-writing from ASP:

    <%If zipCode = "" Then %>
    <font color="blue">Enter a Zip Code:</font>
    <%Else%>
    <table border="1" cellspacing="1" ...
    <tr>
    <td width="200"<b>Email</b>
    <td with="200" ...

for the C# side that I was writing, I put under the page load method:

    protected void Page_Load(object sender, EventArgs e)
    {
    zipCode.Focus();
    zipCode.Text = "";
    }

my thought process was I was trying to match the 

    If zipCode = "" Then

line on the C# side, but it still shows the HTML table on page load. I am thinking maybe it would be more of a JavaScript fix rather than a C# fix. But is there a way to do it through C# instead? Or would this be easier in JavaScript?

Upvotes: 0

Views: 7420

Answers (5)

user1063108
user1063108

Reputation: 712

may be you should do something like this and see if this works for you. put the table html in a variable like this

 String tableEl = "<table border=\"1\" cellspacing=\"1\"    style=\"display:block\"...";

Than in your first condition where you want to change the visibility to hidden,

<%If zipCode = "" Then %>
<font color="blue">Enter a Zip Code:</font>
 tableEl = "<table border=\"1\" cellspacing=\"1\" style=\"display:none\"...";
<%Else%>
 // and print it as is in the block where you want to show it, you can    play around with many things in style etc to get this behavior
<%=tableEl %>
<tr>
<td width="200"<b>Email</b>
<td with="200" ...

Just have to try different options and do not isolate yourself with just one approach and you will see you can get your answer

Upvotes: 0

Jeric Cruz
Jeric Cruz

Reputation: 1909

You can do it using javascript

//this means document.ready
$(function(){
    $("#loader").css("display","none");
    
    $("#showit").click(function(e){
      $("#loader").css("display","inline-block");
    })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="loader">
  <tr>
    <td>dsada</td>
    <td>dsad</td>
    <td>dsada</td>
  </tr>
</table>

<button id="showit">Show table</button>

Upvotes: 1

Midhun Mundayadan
Midhun Mundayadan

Reputation: 3192

yes,if you prefer pure html page as UI rather than .aspx then you have to use javascript or jQuery even css

document.getElementById("yourtableid").style.visibility = "hidden";

Upvotes: 0

Dalin Huang
Dalin Huang

Reputation: 11342

jQuery

$('table').hide();

$(document).ready(function() {
  $('table').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>im not table</div>
<table>
  <th>what head 11</th>
  <td>1111</td>
  <td>222</td>
</table>
<div>im not table 22</div>

Upvotes: 0

guest271314
guest271314

Reputation: 1

Use css

table#tableId {
  display: none;
}

Upvotes: 2

Related Questions