Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    hidden <tr> on JS

    Hello.

    I have a table which looks like:

    <table>
    <tr><td>one</td></tr>
    <tr><td>one display</td></tr>
    <tr><td>one display</td></tr>
    </table>

    The "one display" are set to be "display: none";
    It's being set automatically using a "for" loop in PHP.
    I want it to become "display: inline"; when a user clicks on the "one" td.
    Both "one display"'s should have the same name (or ID, if possible), so I can make them both appear when I click on the "one";

    How do I do that?

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Posts
    1,665
    Thanks
    0
    Thanked 27 Times in 25 Posts
    id attributes must be unique on a page, i.e they can only be used once on each page. The appropriate attribute to use would be class.

    e.g.

    js:
    Code:
    function toggleRows() {
    
    	var rows = document.getElementsByTagName('tr');
    	for (i=0; i<rows.length; i++) {
    		if (rows[i].className && rows[i].className=='optional') {
    			rows[i].style.display = 'inline';
    		}
    	}
    
    }
    markup:
    Code:
    <table>
    	<tr>
    		<td><a href="#" onclick="toggleRows(); return false;">one</a></td>
    	</tr>
    	<tr class="optional">
    		<td>one display</td>
    	</tr>
    	<tr class="optional">
    		<td>one display</td>
    	</tr>
    </table>

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You may use a full dynamic method without any special markup of id or class

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    toggleRows(obj){
    var 
    row obj.parentNode;
    while(
    row.nodeName.toLowerCase()!='tr'){
    row=row.parentNode;
    }
    var 
    next row.nextSibling;
    while(
    next){
    if(
    next.nodeName.toLowerCase()=='tr'){
    next.style.display=(next.style.display=='none'||next.style.display=='')?'block':'none';
    }
    next=next.nextSibling;
    }
    }
    </script>

    </head>
    <body>
    <table>
        <tr>
            <td><a href="#" onclick="toggleRows(this);return false">one</a></td>
        </tr>
        <tr style="display:none">
            <td>one display</td>
        </tr>
        <tr style="display:none">
            <td>one display</td>
        </tr>
    </table>
    </body>
    </html> 
    Last edited by Kor; 12-07-2005 at 09:41 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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