tables interaction
Hi All,
Finally decided I should have a decent webpage and I'm building another one from scratch. However, I want to do something with tables and I don't know how:
I have two html tables (ie, a table with a table with two columns inside) and I have a menu with options on the left table and text on the right table.
Now I want to be able to pick a link from the menu on the left-side and have the text on the right-side table change accordingly (kinda like replicating the behavior one can get out of frames)
I am fluent in Java, jsp and servlets, and I know some javascript. The problem is that I do not know how to reference tables and their raws or columns. If someone knows how to do this, I would very much appreciate it!
Many thanks
joba
detox posted this at 04:42 — 10th October 2001.
They have: 571 posts
Joined: Feb 2001
this should be crossbrowser. Did you want to have content shown from the links or just a description of the link?
I have done this with layers but you could do it with innerhtml etc. The prob is crossbrowser stuff. I have more experience with this than inner html.....
either way this should work ok:
<?php
<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<script language=\"JavaScript\"><!--
function show(object) {
if (document.getElementById && document.getElementById(object) != null)
node = document.getElementById(object).style.visibility='visible';
else if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'visible';
else if (document.all)
document.all[object].style.visibility = 'visible';
}
function hide(object) {
if (document.getElementById && document.getElementById(object) != null)
node = document.getElementById(object).style.visibility='hidden';
else if (document.layers && document.layers[object] != null)
document.layers[object].visibility = 'hidden';
else if (document.all)
document.all[object].style.visibility = 'hidden';
}
function hideall(object) {
hide('myLayer1')
hide('myLayer2')
hide('myLayer3')
hide('myLayer4')
hide('myLayer5')
}
//--></script>
<style type=\"text/css\"><!--
.myStyle {position: absolute;top : 20; left: 80; visibility: hidden;}
.mytable {position: absolute;top : 25; left: 10; visibility: visible;}
body {font-family: Verdana, Arial, Helvetica;font-size: 10px;color: #000000}
.content {font-family: Verdana, Arial, Helvetica;font-size: 10px;color: #000000}
//--></style>
<span id=\"mytable\" class=\"mytable\">
<table width=\"300\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\" align=\"left\" bgcolor=\"#FFFFFF\">
<tr>
<td bgcolor=\"#EAEAEA\" width=\"60\"><a href=\"javascript:;\" OnClick=\"hideall();show('myLayer1')\" class=\"content\">nav 1</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer2')\" class=\"content\">nav 2</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer3')\" class=\"content\">nav 3</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer4')\" class=\"content\">nav 4</a><br><br>
<a href=\"javascript:;\" OnClick=\"hideall();show('myLayer5')\" class=\"content\">nav 5</a><br><br></td>
<td bgcolor=\"#FFFFFF\">
</td>
</tr>
</table>
</span>
<span id=\"myLayer1\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
this is the content from link number 1<br>
</td></tr></table>
</span>
<span id=\"myLayer2\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
this is the content from link number 2<br>
</td></tr></table>
</span>
<span id=\"myLayer3\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
this is the content from link number 3<br>
</td></tr></table>
</span>
<span id=\"myLayer4\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\">
<tr><td class=\"content\">
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
this is the content from link number 4<br>
</td></tr></table>
</span>
<span id=\"myLayer5\" class=\"myStyle\">
<table bgcolor=\"#FFFFFF\"><tr><td class=\"content\">
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
this is the content from link number 5<br>
</td></tr></table>
</span>
</body>
</html>
?>
joba posted this at 14:31 — 11th October 2001.
They have: 14 posts
Joined: Oct 2001
THAT'S EXACTLY IT!
Gee, I was hoping for some "high-level" spec of hints and guidelines and I even got the whole code working the way I needed!
Thanks!
joba
joba posted this at 19:29 — 13th October 2001.
They have: 14 posts
Joined: Oct 2001
First of all, many thanks for your help!
I mixed your suggestions, did some browsing on the web and came up with a solution to make a table change dynamically the content of another table, closer to what I wanted. You can check the result on arakno.net. Comments and criticism will be very welcome! I opted for this because personally I dislike the absolute positioning requirement for layers and also because they do not allow javascript use (inside the layer, that is). Layers can make your html code messier as well, if you're using many with long pieces of text.
So I used innerHTML the following way:
I have a script that has arrays for each content:
var content = new array;
content[0] = "The first text";
// I use this to load external html files, if they have scripts on them
content[1] = "";
content[n] = ...;
Then, on the options table I have:
option1
option 2
...
and so on
And on the destination table (or any other place holder) I have a tag:
...
Advantages (at least I think they are advantages for what I had in mind):
-No need to use absolute positions that were pissing me off whenever the window was resized or moved, forcing me to use code to check that.
-Use of text when it is needed, or external files on the fly with not that many scripting code
-external files can themselves use javascript
Disadvantages:
-you tell me
-not crossbrowser (did not check with NN6+)
joba
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.