Show/Hide Row

**gits** · Jun 29 '07, 06:55 AM

hi,

have a look at the following example the uses dom-scripting-methods instead of setting styles ... that will do the job:

[HTML]
<html>
<head>
<script>
var hidden_row = null;
var next_row = null;
var parent_node = null;

function hide_row(id) {
var rows = document.getEle mentsByTagName( 'tr');

for (var i = 0; i < rows.length; i++) {
var row = rows[i];

if (row.id == id) {
hidden_row = row;
next_row = rows[i + 1];
break;
}
}

parent_node = hidden_row.pare ntNode;

parent_node.rem oveChild(hidden _row);
}

function show_hidden_row () {
parent_node.ins ertBefore(hidde n_row, next_row);
}
</script>
</head>
<body>
<table id="my_table">
<tr id="row1">
<td>test1</td>
<td>test1</td>
<td>test1</td>
</tr>
<tr id="row2">
<td>test2</td>
<td>test2</td>
<td>test2</td>
</tr>
<tr id="row3">
<td>test3</td>
<td>test3</td>
<td>test3</td>
</tr>
</table>

<br/>

<input type="button" value="Hide row2" onclick="hide_r ow('row2');"/>

<input type="button" value="Show hidden row" onclick="show_h idden_row();"/>

</body>
</html>
[/HTML]

ask ... in case you need further explaination ... the script removes the row from the document-tree, but keeps a reference to it, and we may insert it back before the next sibling element (at the moment - this script only works if there is such a next sibling child-node - it relies on that! ;) in case the removed row is the last one, we have to adapt the script ;))

kind regards ...

Show/Hide Row

Show/Hide Row

Comment