Web Hosting Talk






PDA

View Full Version : javascript hide row

mystycs
04-08-2010, 02:48 PM
I found a javascript code to hide rows which is what i want to do. But i dont want to have to press a button to hide it. How can i make it so it just hides automically for whatever row i define in the javascript?

This is the code below.

<body>
<script type="text/javascript">
function displayRow(){
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
}
</script>

<table width="300" border="1">
<tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<p><button onclick="displayRow()" >Show / Hide</button></p>
</body>
</html>
the_pm
04-08-2010, 03:10 PM
Remove the function name and place the code at the bottom of your site (so it doesn't try to trigger before the markup on your page has loaded):

<body>

<table width="300" border="1">
<tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<script type="text/javascript">
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
</script>
</body>
</html>But if you just want a particular row to not display when the page loads, why not simply turn it off using CSS?

#captionRow { display:none }

and that's that!
mystycs
04-08-2010, 03:22 PM
Remove the function name and place the code at the bottom of your site (so it doesn't try to trigger before the markup on your page has loaded):

<body>

<table width="300" border="1">
<tr id="captionRow"><th>TH-1</th><th>TH-2</th><th>TH-3</th></tr>
<tr><td>cell-11</td><td>cell-12</td><td>cell-13</td></tr>
<tr><td>cell-21</td><td>cell-22</td><td>cell-23</td></tr>
</table>
<script type="text/javascript">
var row = document.getElementById("captionRow");
if (row.style.display == '') row.style.display = 'none';
else row.style.display = '';
</script>
</body>
</html>But if you just want a particular row to not display when the page loads, why not simply turn it off using CSS?

#captionRow { display:none }

and that's that!

Ah it finally works!!! yes!!! thank you!!! Ah i wnt to use javascript because i dont want it to be hidden on everypage just certain ones. And on those pages i can just put this javascript and its all good :)
the_pm
04-08-2010, 03:58 PM
#specificPage1 #captionRow, #specificPage2 #captionRow, #specificPage3 #captionRow, #specificPage4 #captionRow { display:none }

where <body id="specificPageX">

Food for thought ;)
mystycs
04-10-2010, 07:35 PM
Is there a code also for removing DIVS just like this one, not for tables but DIvs.

Thanks
the_pm
04-11-2010, 12:25 AM
If your div has an ID or a class attributed to it, then the same code applies.
Driver01
04-12-2010, 09:10 AM
What PM is trying to suggest is that what you want can be easily achieved with simple css, rather then using javascript, js can be turned off!

css would be a much cleaner way of achieving the same goal.
huwnet
04-12-2010, 09:12 AM
If the hidden row isn't actually being used by another JavaScript snippet, then really it'd be best to use php or another language to prevent the row being transmitted in the first place!