Hoi,
Ik heb een tabel gemaakt met daarin een SELECT. Hier zit een stukje Javascript aan gekoppeld om bepaalde delen van de tabel (ingesloten door een TBODY) wel of niet te tonen.
Op zich is dat geen probleem. Het probleem zit 'm in de STYLE.
Ik koppel de STYLE display: block of none aan een TBODY en de eerste cel voor TBODY is ineens even breed als een row binnen de TBODY.
Het gekke is dat het probleem zich nou eens een keer niet in IE voordoet, maar wel in elke andere browser.
Heeft iemand enig idee hoe ik dit moet oplossen?
Alvast bedankt.
Winelover
Ik heb een tabel gemaakt met daarin een SELECT. Hier zit een stukje Javascript aan gekoppeld om bepaalde delen van de tabel (ingesloten door een TBODY) wel of niet te tonen.
Op zich is dat geen probleem. Het probleem zit 'm in de STYLE.
Ik koppel de STYLE display: block of none aan een TBODY en de eerste cel voor TBODY is ineens even breed als een row binnen de TBODY.
Het gekke is dat het probleem zich nou eens een keer niet in IE voordoet, maar wel in elke andere browser.
Heeft iemand enig idee hoe ik dit moet oplossen?
Alvast bedankt.
Winelover
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" xml:lang="nl-nl" lang="nl-nl" dir="ltr" id="minwidth" >
<head>
<script type="text/javascript"><!--
var lastBody = "1";
function showbody(idPrefix, bodyName) {
// hide last tbody
if (lastBody) {
document.getElementById(idPrefix+lastBody).className = "hiddenBody";
}
//if value of the box is not nothing and an object with that name exists, then change the class
if (bodyName && document.getElementById(idPrefix+bodyName)) {
document.getElementById(idPrefix+bodyName).className = "visibleBody";
lastBody = bodyName;
}
}
//-->
</script>
<style type="text/css">
<!--
.hiddenBody {
display: none;
}
.visibleBody {
display: block;
}
-->
</style>
</head>
<body>
<table cellspacing="1" border="1">
<tr>
<td>
Soort adres
</td>
<td>
<select name="adrestype" onchange="showbody('cbody', this.value);">
<option value="1">Bezoekadres</option>
<option value="2">Correspondentieadres</option>
<option value="3">Factuuradres</option>
</select>
</td>
</tr>
<tbody class="visibleBody" id="cbody1">
<tr>
<td>
BAdres
</td>
<td>
<input type="text" name="badres" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Postcode
</td>
<td>
<input type="text" name="bpostcode" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Plaats
</td>
<td>
<input type="text" name="bplaats" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Land
</td>
<td>
<select name="bland">
<option value="1">België</option>
<option value="2">Nederland</option>
</select>
</td>
</tr>
</tbody>
<tbody class="hiddenBody" id="cbody2">
<tr>
<td>
CAdres
</td>
<td>
<input type="text" name="cadres" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Postcode
</td>
<td>
<input type="text" name="cpostcode" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Plaats
</td>
<td>
<input type="text" name="cplaats" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Land
</td>
<td>
<select name="cland">
<option value="1">België</option>
<option value="2">Nederland</option>
</select>
</td>
</tr>
</tbody>
<tbody class="hiddenBody" id="cbody3">
<tr>
<td>
FAdres
</td>
<td>
<input type="text" name="fadres" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Postcode
</td>
<td>
<input type="text" name="fpostcode" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Plaats
</td>
<td>
<input type="text" name="fplaats" size="40" value="" autocomplete="off" />
</td>
</tr>
<tr>
<td>
Land
</td>
<td>
<select name="cland">
<option value="1">België</option>
<option value="2">Nederland</option>
</select>
</td>
</tr>
</tbody>
</table>
</body>
</html>