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

Thread: Expanding Table

  1. #1
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Expanding Table

    I'm a gaming nerd and one of the things I do is help organize information for my guild. I started off using a table to lay out this page. However, it has gotten big enough that is is a bit unwieldly. I tired using horizontal references to jump to sections but it was still a bit of a pain. Then I saw a novel solution someone else was using.

    I worked with someone on another site to try and come up with something that would work as well as that and he gave me some source code to try. His code works perfectly and the only change I would make is purely asthetic (move the + to the other side of the word). However when I went to edit my own tables into it I realized I have trouble understanding what he helped write for me. Could someone please help walk me through (what looks like a simple script) with some comments or <insert here> type stuff. Sorry if it's a big request I tried looking for javascript tutorials and I'm finding it a bit daunting. I've only studied html extensively and a bit of java not javascript so I'm feeling in over my head. Thanks for any help anyone can give. =)

    http://www.wraith10.megadoomer.com/test.htm
    ===Text copy of his script if the test page didnt work===
    SOMETHING LIKE THIS?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <script>
    function dothis(obj)
    {
    if(document.getElementById(obj +"1").value == "+")
    {
    document.getElementById(obj).style.display = '';
    document.getElementById(obj +"1").value = "-"
    }
    else
    {
    document.getElementById(obj).style.display = 'none';
    document.getElementById(obj +"1").value = "+"
    }
    }
    </script>

    </HEAD>

    <BODY>
    <div id = "fruitdiv">FRUITS <input type = "button" value = "+" onclick = "dothis('fruit')" id = "fruit1"></div>
    <table id = "fruit" border = "1" style = "display:none">
    <tr><td>apple</td><td>red</td><td>shiny</td></tr>
    <tr><td>pear</td><td>green</td><td>firm</td></tr>
    <tr><td>banana</td><td>yellow</td><td>lazy</td></tr>
    </table>
    <div id = "fruitdiv">VEGETABLES<input type = "button" value = "+" onclick = "dothis('veg')" id = "veg1"></div>
    <table id = "veg" border = "1" style = "display:none">
    <tr><td>carrot</td><td>orange</td><td>crisp</td></tr>
    <tr><td>cucumber</td><td>green</td><td>delicious</td></tr>
    </table>
    <div id = "fruitdiv">ANIMALS<input type = "button" value = "+" onclick = "dothis('anim')" id = "anim1"></div>
    <table id = "anim" border = "1" style = "display:none">
    <tr><td>cat</td><td>calico</td><td>lazy</td></tr>
    </table>
    </BODY>
    </HTML>

    =====End====

  • #2
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en">
    	<head>
    		<title>50499</title>
    	</head>
    	<body>
    		<dl id="list">
    			<dt>Fruits</dt>
    			<dd>
    				<table>
    					<tbody>
    						<tr><td>apple</td><td>red</td><td>shiny</td></tr>
    						<tr><td>pear</td><td>green</td><td>firm</td></tr>
    						<tr><td>banana</td><td>yellow</td><td>lazy</td></tr>
    					</tbody>
    				</table>
    			</dd>
    			<dt>Vegetables</dt>
    			<dd>
    				<table>
    					<tbody>
    						<tr><td>carrot</td><td>orange</td><td>crisp</td></tr>
    						<tr><td>cucumber</td><td>green</td><td>delicious</td></tr>
    					</tbody>
    				</table>
    			</dd>
    			<dt>Animals</dt>
    			<dd>	
    				<table>
    					<tbody>
    						<tr><td>cat</td><td>calico</td><td>lazy</td></tr>
    					</tbody>
    				</table>
    			</dd>
    		</dl>
    		
    		<script type="text/javascript">
    			var groups = document.getElementById("list").getElementsByTagName("dt");
    			var items = document.getElementById("list").getElementsByTagName("dd");
    			
    			for(var i = 0; i < groups.length; i++)
    			{
    				groups[i].addEventListener("click",toggleGroup,true);
    				items[i].style.display = 'none';
    			}
    			
    			function toggleGroup(e)
    			{
    				var num = findNum(e.currentTarget);
    				if(num < 0)
    				{
    					return;
    				}
    				
    				items[num].style.display = (items[num].style.display == 'none') ? '' : 'none';
    			}
    			
    			function findNum(obj)
    			{
    				for(var i = 0; i < groups.length; i++)
    				{
    					if(groups[i].isSameNode(obj))
    					{
    						return i;
    					}
    				}
    				return -1;
    			}
    		</script>
    	</body>
    </html>
    Standards compliant browsers only, though it is possible to get it working in IE.

  • #3
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Heh - This is for WoW. Good idea, making a site to show what people can do etc. Perhaps I will muster something up for my guild. Kick A$$ game BTW, now if I could only remember my my wife and kid's names.

    Basscyst
    Helping to build a bigger box. - Adam Matthews


  •  

    Posting Permissions

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