Unable to hide Whole Column . please help
Posted: Wed Jan 10, 2007 8:09 am
Hello,
I am facing a little problem in HTML. please help in this regard.
When you run the below code, the MIDDLE COLUMN WILL SHOWN BLANK. ACTUALLY I NEED TO hide the MIDDLE Column when the page opens first time.THen by clicking on the link "SORTED BY", MIDDLE COLUMN WILL be appear. But something happens wrong. Actually i turn on the border of table, so when the page opens first time, it shows the border of first column, kindly guide me that how can i modify this code so that it will not shown the MIDDLE COLUMN when the page loads. And after clicking on the link, it will show the whole MIDDLE COLUMN WITH ITS DATA.
Hope for a response soon. I have tested it in FIREFOX ONLY.
I am facing a little problem in HTML. please help in this regard.
When you run the below code, the MIDDLE COLUMN WILL SHOWN BLANK. ACTUALLY I NEED TO hide the MIDDLE Column when the page opens first time.THen by clicking on the link "SORTED BY", MIDDLE COLUMN WILL be appear. But something happens wrong. Actually i turn on the border of table, so when the page opens first time, it shows the border of first column, kindly guide me that how can i modify this code so that it will not shown the MIDDLE COLUMN when the page loads. And after clicking on the link, it will show the whole MIDDLE COLUMN WITH ITS DATA.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
Code: Select all
<style type="text/css">
table {
width: 799px;
margin: 0 auto;
/* border: 2px outset;*/
border-spacing: 0; /* This property is not supported by Internet Explorer. */
}
*#column_1 {
width: 10px;
}
*#column_2 {
width: 25px;
}
th, td {
/* border: 2px inset;*/
border: 3px double ;
}
th {
text-align: center;
font-weight: normal;
}
td {
padding: 0;
vertical-align: top;
}
*.hidden {
display: none;
}
</style>
Code: Select all
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("label")[1].className = "hidden";
}
function updateExistingPage() {
document.getElementsByTagName("label")[1].className = "";
document.getElementsByTagName("label")[2].className = "";
}
</script>
Code: Select all
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<td onclick="updateExistingPage()"><label><a href="#" id="radiobutton_2">Sorted By</a></label>
<br />
Alphabet<br />
Caffeine Tea </td>
<td id="ro_2"><label>Row No.2</label></td>
<td><label>Row No. 3</label></td>
</tr>
</table>
</body>
</html>