SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show / hide a colum

    Hi all,

    I have a table which is filled by PHP and I want the users to be able to click on a certain Colum header so it will disapear and an other will show..

    ie:

    first it shows
    Firstname - Lastname - Address
    (with some data under it)
    when a user click on address it would change to:
    Firstname - Lastname - e-mail


    I know it has to do with
    Code:
    style.display = "none"
    Thanks in advance!!!

    Peanuts
    the neigbours (free) WIFI makes it just a little more fun

  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the question is?
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HOw can I do this ??? I tried with identifiers but It doesn´t work !!! is there a way I can do it with a (style) class or something like that???
    the neigbours (free) WIFI makes it just a little more fun

  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?
    Code:
    <html>
    <head>
    <title>Hiding Columns</title>
    <script type="text/javascript">
    
    function hide(id) {
    	var cg = document.getElementById('cg1');
    	if (cg.normalize) cg.normalize();
    	for (var i=0; i<cg.childNodes.length; i++) {
    		var c = cg.childNodes[i];
    		if (c.style.display == 'none')
    			c.style.display = 'block';
    		}
    	document.getElementById(id).style.display = 'none';
    	}
    
    </script>
    <style type="text/css">
    table.myTable {
    	width: 300px;
    	}
    table.myTable th {
    	cursor: pointer;
    	padding: 3px;
    	}
    table.myTable td {
    	padding: 3px;
    	}
    </style>
    </head>
    <body>
    <table class="myTable" border="1">
    	<colgroup id="cg1">
    		<col id="c1">
    		<col id="c2">
    		<col id="c3">
    	</colgroup>
    	<thead>
    		<tr>
    			<th onclick="hide('c1');">1</th>
    			<th onclick="hide('c2');">2</th>
    			<th onclick="hide('c3');">3</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    		</tr>
    		<tr>
    			<td>1</td>
    			<td>2</td>
    			<td>3</td>
    		</tr>
    	</tbody>
    </table>
    </body>
    </html>
    Last edited by beetle; Dec 10, 2002 at 08:34.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  5. #5
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Yep thats precizely what I was looking for thanks!!!!

    the neigbours (free) WIFI makes it just a little more fun


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •