...

View Full Version : Expanding Table



Wraith10
01-17-2005, 09:27 PM
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. (http://www.wraith10.megadoomer.com/wow/skills.htm) 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 (http://www.megadoomer.com/tailoring) 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====

hemebond
01-18-2005, 05:06 AM
<!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.

Basscyst
01-18-2005, 06:29 PM
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. :p

Basscyst



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum