I can't hide this table

Question

1.00/5 (1 vote)

See more:

i have a code for table show and hide,but i want to hide it because it is as an answer for student

What I have tried:

<!DOCTYPE html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
   $(document).ready(function() {
    //To hide the table
     $(".hidetable").click(function () {
     $(".table_bg").hide("fast")
   });
    //To show the table
     $(".showtable").click(function () {
     $(".table_bg").show(2000);
   });    
   //To hide ODD rows
     $(".hideoddrows").click(function () {
     $(".table_bg  tr:odd").hide("slow")
   });
    //To show ODD rows
     $(".showoddrows").click(function () {
     $(".table_bg  tr:odd").show(1000)
   });  
   
});
</script>



<style>
.table_bg {
  width:40%;
  font-family:verdana;
  font-size:15px;  
  color:#fff;
  padding: 10px;
  text-align:center;
}
.table_bg th{
    background: #0780BA;

    color: #fff;
    line-height:35px;
  }
.table_bg td{
    background: #99DBFB;    
    padding:10px;

    color: #000;
  }  
</style>
</head>

<body>
  
<h1>jQuery hide/show demo</h1>
<button class="hidetable">Hide Table</button>
<button class="showtable">Show Table</button>

</p>
<table class="table_bg">
    <tr>
  
     <th>Age</th>
     <th>Salary</th>
    </tr>
    <tr>
     <td>1</td>
     <td>Jim</td>
     
    </tr>
    <tr>
     <td>2</td>
     <td>Anna</td>
    
    </tr>
    <tr>
     
    </tr>        
</table>

</body>
</html>

Posted 5-Jul-18 5:29am

Member 13898220

Updated 6-Jul-18 2:18am

Add a Solution

Comments

[no name] 5-Jul-18 11:51am

I put your code in a jsfiddle (http://jsfiddle.net/617qLwbg/) and it seems to work fine? What is the problem?

ZurdoDev 5-Jul-18 16:31pm

What does happen?

j snooze 5-Jul-18 17:16pm

If Thaddeus says your code seems to work fine, and you don't agree, try clearing your temp internet files. I've banged my head on many desks wondering why my javascript changes didn't take, only to realize that the page had been cached.

2 solutions

Solution 2

thank you for your efforts
it was good advice

Posted 6-Jul-18 2:18am

Member 13898220

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Mohibur Rashid · Accepted Answer · 2018-07-05T15:56:00

Solution 1

My guess is you asked the wrong question
I guess, you want to start the page with hidden table

Two solutions I will suggest.
1 add style in the table

<TABLE style="display:none">

2. Add another statement in $(document).ready()

JavaScript

$(document).ready(function() {
 $(".table_bg").hide();
...
}

Posted 5-Jul-18 15:56pm

Mohibur Rashid

Comments

Member 13898220 6-Jul-18 9:17am

okey,but when i add another table in the same page it point to the first table
i want every table with it's code
could i rename every table by id?

Mohibur Rashid 7-Jul-18 20:29pm

give every table a separate id.