Hide Columns in tables based on variables
I have a table with 1 row and 5 columns. I want to hide each column based on specific variables in the web page. Is there a way to do that. I tried a <div> tag and the below code, but it says you cannot put a <div> tag in a table etc.
Code:
document.getElementById('hiddenYearLeft').style.display = "none";
document.getElementById('hiddenYearLefta').style.display = "none";
You cannot place <td> in a <div>. Why are you not using <div> instead of a table.
I am new to Html/CSS and not sure how I would do a DIV tag in a table style format?
Originally Posted by
tvb2727
I have a table with 1 row and 5 columns. I want to hide each column based on specific variables in the web page. Is there a way to do that. I tried a <div> tag and the below code, but it says you cannot put a <div> tag in a table etc.
Code:
document.getElementById('hiddenYearLeft').style.display = "none";
document.getElementById('hiddenYearLefta').style.display = "none";
post all your code so we can see what is going on and not just bits and pieces of it.
Here is the code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table Hide Help</title>
<script type="text/javascript">
<!--
//-->
</script>
<style type="text/css">
h2 { color: #0000A0;}
h5{font-family:"Arial"; font-size:16px;}
h3 { color: #FF0000; font-size: 22px;}
</style>
</head>
<body>
<form name="main">
<h2>
<table id="tblTimer" cellpadding="6px" bordercolor="#000000" cellspacing="10" align="center" width="500px" style="margin: 70 0 0 0" border="5">
<!--<caption style="font-weight: bold; ">Time Left</caption>-->
<div id='hiddenYearLeft'>
<th>Years Left</th>
</div>
<th>Days Left</th>
<th>Hours Left</th>
<th>Minutes Left</th>
<th>Seconds Left</th>
<tr >
<div id='hiddenYearLefta'><td id="cellYears" align="center" >0</td></div>
<td id="cellDays" align="center" >0</td>
<td id="cellHours" align="center">0</td>
<td id="cellMinutes" align="center">0</td>
<td id="cellSeconds" align="center">0</td>
</tr>
</table>
</h2>
<hr />
</form>
</body>
</html>
Originally Posted by
tvb2727
.......Is there a way to do that.....
You haven't yet specified which columns you want to hide and what variables to use to hide those columns.yes, there is
Sorry. Hopefully someone will.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table Hide Help</title>
<script type="text/javascript">
<!--
var hide = 0;
function hideyear() {
if (hide == 0) {
window.alert("hide year code?");
hide = 1;
} else {
window.alert(" un-hide year code?")
hide = 0;
}
}
//-->
</script>
<style type="text/css">
h2 { color: #0000A0;}
h5{font-family:"Arial"; font-size:16px;}
h3 { color: #FF0000; font-size: 22px;}
</style>
</head>
<body>
<form name="main">
<h2>
<table id="tblTimer" cellpadding="6px" bordercolor="#000000" cellspacing="10" align="center" width="500px" style="margin: 70 0 0 0" border="5">
<!--<caption style="font-weight: bold; ">Time Left</caption>-->
<div id='hiddenYearLeft'>
<th>Years Left</th>
</div>
<th>Days Left</th>
<th>Hours Left</th>
<th>Minutes Left</th>
<th>Seconds Left</th>
<tr >
<div id='hiddenYearLefta'><td id="cellYears" align="center" >0</td></div>
<td id="cellDays" align="center" >0</td>
<td id="cellHours" align="center">0</td>
<td id="cellMinutes" align="center">0</td>
<td id="cellSeconds" align="center">0</td>
</tr>
</table>
</h2>
<hr />
<input type="button" id="hide" value="Hide Year Column" onclick="hideyear();" />
</form>
</body>
</html>
ok, no problem
PHP Code:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > html xmlns = "http://www.w3.org/1999/xhtml" > head > title > Table Hide Help </ title > script type = "text/javascript" > hide = 0 ; hideyear () { hide == 0 ) { document . getElementById ( "cellYears" ). style . display = "none" ; document . getElementById ( "thCellYears" ). style . display = "none" ; hide = 1 ; document . getElementById ( "cellYears" ). style . display = "block" ; document . getElementById ( "thCellYears" ). style . display = "block" ; hide = 0 ; //--> </script> <style type="text/css">
Another way would be to give the <th> <td> pairs a class name and get the elements to hide/unhide by class.
Ha Ha. Thanks a lot. Exactly what I needed!
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
Reply With Quote
Originally Posted by tvb2727
, maybe use this as a template:
Bookmarks