Forum Moderators: open
test.js
var current = {cell:0, layerId:'lyr1'}
function changeMe(cell,layerId)
{
if(current.cell)
{
current.cell.style.backgroundColor = "";
current.cell.style.color = "";
}
cell.style.backgroundColor = "#797979";
cell.style.color = "#000000";
document.getElementById(current.layerId).style.display = "none";
document.getElementById(layerId).style.display = "block";
current = {cell:cell, layerId: layerId};
}
html part
<html><head><title>TEST</title>
<style>
#mytable td
{
font-size: xx-small;
font-family: tahoma;
color: #ffffff;
text-align: center;
background-color: #EBEBEB;
width: 99px;
text-decoration: underline;
cursor: pointer; cursor: hand;
}
.nice
{
display: none;
text-align: center;
width: 120px;
height: 60px;
border: solid 1px gray;
}
</style>
<script src="test.js" type="text/javascript"></script>
</head>
<body>
<div class="nice" style="display:block;" id="lyr1">
<img border="0" src="../images/on.gif" width="120" height="60"></div>
<div class="nice" id="lyr2">
Hello</div>
<div class="nice" id="lyr3">
Goodbye</div>
<table id="mytable">
<td COLSPAN="3" height="15" id="nav1" onclick="changeMe(this,'lyr2')">
Text1</td>
<td COLSPAN="4" height="15" id="nav2" onclick="changeMe(this,'lyr3')">
Text2</td>
</table>
</body>
</html>
Another approach is to add an event handler to the target element(s), which then obviates the need for passing 'this' with an element attribute handler.
You'll either need to pass the id of the current element in your function call, and modify your script to use the passed parameter instead of the stored value of the property, 'current.layerId', or modify the function to allow you to simply pass 'this' with the event.Another approach is to add an event handler to the target element(s), which then obviates the need for passing 'this' with an element attribute handler.
I know very little about javascript and wouldn't know where to even start looking for what you described (what is used now was a pre-made script. Can you offer any suggestions or even links to good tutorials?
For example, if I was doing it in php I would loop the data for the table name so that each name was based on a db result.
query = mysql_query("select * from blah");
results = mysql_fetch_array($query);
$id = $results[id];
<table id="$id">
?
For example this is a sample of how I would use it (forgive the sloppiness of the code, it is just thrown together to give a general ideal)
$result = mysql_query("select * from users where name=Jim");//grab all the content
echo "<table border=0><tr>";
while($r=mysql_fetch_array($result)) {
$email=$r["email"];
$reg=$r["reg"];HTML CODE SNIPPET
<body>
<div class="nice" style="display:block;" id="lyr1">
<? echo "$type";?></div>
<div class="nice" id="lyr2">
<? echo "$email";?></div>
<div class="nice" id="lyr3">
<? echo "$reg";?></div>
<table id="mytable">
<td COLSPAN="3" height="15" id="nav1" onclick="changeMe(this,'lyr2')">
Text1</td>
<td COLSPAN="4" height="15" id="nav2" onclick="changeMe(this,'lyr3')">
Text2</td>
</table>
<?
$count++;
if ($count==3) {
echo "</tr>";
$count=0;
}
}
?>
