/    Sign up×
Community /Pin to ProfileBookmark

Hide Columns in tables based on variables

Copy linkTweet thisAlerts:
May 28.2010

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”;[/CODE]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@tpircsavajMay 28.2010 — You cannot place <td> in a <div>. Why are you not using <div> instead of a table.
Copy linkTweet thisAlerts:
@tvb2727authorMay 29.2010 — I am new to Html/CSS and not sure how I would do a DIV tag in a table style format?
Copy linkTweet thisAlerts:
@tirnaMay 29.2010 — 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.

document.getElementById('hiddenYearLeft').style.display = "none";
document.getElementById('hiddenYearLefta').style.display = "none";[/quote]

post all your code so we can see what is going on and not just bits and pieces of it.
Copy linkTweet thisAlerts:
@tvb2727authorMay 29.2010 — 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>[/CODE]
Copy linkTweet thisAlerts:
@tirnaMay 29.2010 — .......Is there a way to do that.....[/quote]

You haven't yet specified which columns you want to hide and what variables to use to hide those columns.

So all I can say at this stage to answer the above question is: [B]yes, there is[/B] ?

I don't have time to look at this anymore. Hopefully someone else will come along to help you.
Copy linkTweet thisAlerts:
@tvb2727authorMay 29.2010 — 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>[/CODE]
Copy linkTweet thisAlerts:
@tirnaMay 29.2010 — ok, no problem ?.

After squeezing the additional information out of you ?, maybe use this as a template:

[code=php]
<!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) {
document.getElementById("cellYears").style.display = "none";
document.getElementById("thCellYears").style.display = "none";
hide = 1;
} else {
document.getElementById("cellYears").style.display = "block";
document.getElementById("thCellYears").style.display = "block";
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">
<th id="thCellYears">Years Left</th>
<th>Days Left</th>
<th>Hours Left</th>
<th>Minutes Left</th>
<th>Seconds Left</th>
<tr >
<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>
[/code]

Another way would be to give the <th> <td> pairs a class name and get the elements to hide/unhide by class.
Copy linkTweet thisAlerts:
@tvb2727authorMay 29.2010 — Ha Ha. Thanks a lot. Exactly what I needed!
×

Success!

Help @tvb2727 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...