A
alexyz
Hi everyone,
I write a simple javascript to expand / collapse some rows of a table.
The problem is that when I click more than one time the link to expand
/collapse the rows I get an unwanted extra space after such rows.
Can anyone help me to solve the problem (I use Firefox to test this
code)?
Here there is the sample code:
<html>
<head>
<script type="text/javascript">
function setTableRowClass(currentNode){
// get child nodes of tbody tag
var rowToHide =
currentNode.parentNode.parentNode.parentNode.childNodes;
var aux = 0;
for(var j = 0; j < rowToHide.length; j++)
if(rowToHide[j].tagName == 'TR')
if(aux == 0)
aux = 1; //skip the first 'tr' tag with the link 'Hide details'
else
if(rowToHide[j].style.display == 'none')
rowToHide[j].style.display = 'block'; // show
else
rowToHide[j].style.display = 'none'; // hide
return false;
}
</script>
</head>
<body>
<table style="{border-style: solid;}">
<tbody>
<tr>
<td>
<a href="#" onclick="return setTableRowClass(this);">Click for
details 1</a>
</td>
</tr>
<tr style="display: none;"><td>Details 1</td></tr>
<tr style="display: none;"><td>Details 2</td></tr>
<tr style="display: none;"><td>Details 3</td></tr>
</tbody>
<tbody>
<tr>
<td>
<a href="#" onclick="return setTableRowClass(this);">Click for
details 2</a>
</td>
</tr>
<tr style="display: none;"><td>Details 4</td></tr>
<tr style="display: none;"><td>Details 5</td></tr>
<tr style="display: none;"><td>Details 6</td></tr>
</tbody>
</table>
</body>
</html>
Thanks
Bye,
Alessandro
I write a simple javascript to expand / collapse some rows of a table.
The problem is that when I click more than one time the link to expand
/collapse the rows I get an unwanted extra space after such rows.
Can anyone help me to solve the problem (I use Firefox to test this
code)?
Here there is the sample code:
<html>
<head>
<script type="text/javascript">
function setTableRowClass(currentNode){
// get child nodes of tbody tag
var rowToHide =
currentNode.parentNode.parentNode.parentNode.childNodes;
var aux = 0;
for(var j = 0; j < rowToHide.length; j++)
if(rowToHide[j].tagName == 'TR')
if(aux == 0)
aux = 1; //skip the first 'tr' tag with the link 'Hide details'
else
if(rowToHide[j].style.display == 'none')
rowToHide[j].style.display = 'block'; // show
else
rowToHide[j].style.display = 'none'; // hide
return false;
}
</script>
</head>
<body>
<table style="{border-style: solid;}">
<tbody>
<tr>
<td>
<a href="#" onclick="return setTableRowClass(this);">Click for
details 1</a>
</td>
</tr>
<tr style="display: none;"><td>Details 1</td></tr>
<tr style="display: none;"><td>Details 2</td></tr>
<tr style="display: none;"><td>Details 3</td></tr>
</tbody>
<tbody>
<tr>
<td>
<a href="#" onclick="return setTableRowClass(this);">Click for
details 2</a>
</td>
</tr>
<tr style="display: none;"><td>Details 4</td></tr>
<tr style="display: none;"><td>Details 5</td></tr>
<tr style="display: none;"><td>Details 6</td></tr>
</tbody>
</table>
</body>
</html>
Thanks
Bye,
Alessandro