Hi,
I'm relatively new to JavaScript, but not to programming.
I'm trying to get a table to expand and collapse within a cell of my master table. However i want to collapse all the other open tables when i expand a new one. I'm nearly there but i get an error that i can't seem to shake.
Firefox show me the error as the following:
Error: document.getEle mentById("more" + i) is null
Source File: http://www.fleethenest.com/nl/adamscott/index.php
Line: 21
If i remove the call to collapse_all(); then it executes with no errors and as expected, but obviously doesn't collapse all! I can't understand why my getElementById works sometimes but not in the collapse_all();
Am i misunderstandin g a fundamental part of JS?
THanks for your help, here's my page:
I'm relatively new to JavaScript, but not to programming.
I'm trying to get a table to expand and collapse within a cell of my master table. However i want to collapse all the other open tables when i expand a new one. I'm nearly there but i get an error that i can't seem to shake.
Firefox show me the error as the following:
Error: document.getEle mentById("more" + i) is null
Source File: http://www.fleethenest.com/nl/adamscott/index.php
Line: 21
If i remove the call to collapse_all(); then it executes with no errors and as expected, but obviously doesn't collapse all! I can't understand why my getElementById works sometimes but not in the collapse_all();
Am i misunderstandin g a fundamental part of JS?
THanks for your help, here's my page:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
var expanded = false;
var num_stocks = 5;
function show_more(i) {
collapse_all();
document.getElementById("more"+i).innerHTML = '<a href="JavaScript:show_less(\''+i+'\')">-</a><table width="100%" border="1" cellspacing="2" cellpadding="2"><tr><td>Metric \\ Time</td><td>2008</td><td>2007</td></tr><tr><td>AA</td><td>4.8</td><td>4.3</td></tr><tr><td>AB</td><td>116</td><td>101</td></tr></table>';
}
function show_less(i) {
document.getElementById("more"+i).innerHTML = '<a href="JavaScript:show_more(\''+i+'\')">+</a>';
}
function settings(setting, value) {
if (setting == "expanded") expanded = value;
}
function collapse_all() {
for (var i=0; i <= num_stocks; i++) {
document.getElementById("more"+i).innerHTML = '<a href="JavaScript:show_more(\''+i+'\')">+</a>';
}
}
</script>
</head>
<body>
<div id="message">Message: </div>
<table width="1000px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="700px" valign="top"><table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td><strong>Symbol</strong></td>
<td><strong>Name</strong></td>
<td><strong>Last Price</strong></td>
</tr>
<tr>
<td>AAL.L</td>
<td>ANGLO AMERICAN<br /><div id="more0"><a href="Javascript:show_more('0')">+</a></div></td>
<td>1288</td>
</tr>
<tr>
<td>ABF.L</td>
<td>ASSOCIAT BRIT FOODS<br /><div id="more1"><a href="Javascript:show_more('1')">+</a></div></td>
<td>664.5</td>
</tr>
<tr>
<td>AMEC.L</td>
<td>AMEC<br /><div id="more2"><a href="Javascript:show_more('2')">+</a></div></td>
<td>577</td>
</tr>
<tr>
<td>AML.L</td>
<td>AMLIN<br /><div id="more3"><a href="Javascript:show_more('3')">+</a></div></td>
<td>376</td>
</tr>
<tr>
<td>ANTO.L</td>
<td>ANTOFAGASTA<br /><div id="more4"><a href="Javascript:show_more('4')">+</a></div></td>
<td>470</td>
</tr>
</table></td>
<td width="300px" valign="top">
<table width="100%" border="1" cellspacing="2" cellpadding="2">
<tr>
<td colspan="2">Settings</td>
</tr>
<tr>
<td width="10px"><input type="checkbox" onchange="Javascript:settings('expanded',this.checked)" id="settings_expanded" checked="checked"/></td>
<td>Show Multiple Expanded Stocks.</td>
</tr>
</table> </td>
</tr>
<tr>
<td colspan="700px" valign="top"> </td>
<td valign="top"> </td>
</tr>
</table>
</body>
</html>
Comment