Unable to hide Whole Column . please help

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

Unable to hide Whole Column . please help

Post by eshban »

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.

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>
Hope for a response soon. I have tested it in FIREFOX ONLY.
User avatar
jyhm
Forum Contributor
Posts: 228
Joined: Tue Dec 19, 2006 10:08 pm
Location: Connecticut, USA
Contact:

Post by jyhm »

Do you have an id named ro_2? I don't see it in your css.
eshban
Forum Contributor
Posts: 184
Joined: Mon Sep 05, 2005 1:38 am

Post by eshban »

forget about ' ro_2' and reply me if you know the solution.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

eshban wrote:forget about ' ro_2' and reply me if you know the solution.
Be nice. I think having the CSS for ro_2 is slightly important to show here.
Post Reply