homerUK
08-24-2006, 10:30 AM
hi guys...
I'm having a problem showing and hiding a table row. I create it using the DOM insertRow() method, which all works fine.. but when I hide it, then click again to show the row, it appears underneath the first column.
The basic idea is that I am creating a tree structure of top level "menus". The user can then drill down through the menus and as they do, I want to show and hide sub menus. I dont want to load all these at the start (which would be easier) as there are so many. If the user requests say menuA, the code will go away and request all the sub menu data from the DB... (this bit is not the problem).
example: http://www.mattfacer.com/test/test.php (click on the links in the first column... they will effectivly toggle the data.
JavaScript Code:
/* array to store what's been loaded */
/* this stops the user calling the data from the database each time the row is shown/hidden */
var loaded = Array();
/* Load the arrays (this would come from the database) */
var sub_rows_1 = Array(
"<td> </td><td>sub1</td><td>sub2</td><td>sub3</td>",
"<td> </td><td>sub5</td><td>sub6</td><td>sub7</td>"
);
var sub_rows_2 = Array(
"<td> </td><td>sub ddd</td><td>sub eee</td><td>sub fff</td>",
"<td> </td><td>suby</td><td>subt</td><td>subu</td>"
);
/* function to show the row (this would fetch from the DB) */
/* ID is the row identifier */
function show_row(id) {
var tbl = document.getElementById("my_table");
var rowIndex = (document.getElementById("row_" + id).rowIndex + 1); //the row which we'll work under
var row_name = eval("sub_rows_" + id);
for (x=0;x<row_name.length;x++) {
var newRow = tbl.insertRow(rowIndex);
newRow.innerHTML = row_name[x];
newRow.className = "class_sub_" + id;
}
loaded.push(id);
}
/* toggle the row (show or hide depending on the row's status) */
function toggle(id) {
if (loaded.indexOf(id) < 0) {
//not added this tree yet, so do it
show_row(id);
} else {
//each sub row is labelled with a classname so it can be reffered to (id is meant to be unique!)
rows = getElementsByClass("class_sub_" + id, document, "tr");
for (x=0;x<rows.length;x++) {
if (rows[x].style.display == "none") {
rows[x].style.display = "block";
} else {
rows[x].style.display = "none";
}
}
}
}
/* find all elements by className */
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
HTML code
<table id="my_table" border="1">
<tbody>
<tr>
<td> </td>
<td><strong>Col 1</strong></td>
<td><strong>Col 2</strong></td>
<td><strong>Col 3</strong></td>
</tr>
<tr id="row_1">
<td><a href="#" onClick="toggle(1); return false;">show</a></td>
<td>Data red</td>
<td>Data yekk</td>
<td>Data gren</td>
</tr>
<tr id="row_2">
<td><a href="#" onClick="toggle(2); return false;">clicky</a></td>
<td>Data x</td>
<td>Data y</td>
<td>Data z</td>
</tr>
</tbody>
</table>
any ideas if there is an easier way to hide / show table rows?!! (It HAS to work across all "popular" browsers... even IE :rolleyes: )
BTW: I am aware my example doesnt work in IE! So if anyone knows of a way, that'd be ace. Works ok (ish) in FF....
thanks for any help :)
I'm having a problem showing and hiding a table row. I create it using the DOM insertRow() method, which all works fine.. but when I hide it, then click again to show the row, it appears underneath the first column.
The basic idea is that I am creating a tree structure of top level "menus". The user can then drill down through the menus and as they do, I want to show and hide sub menus. I dont want to load all these at the start (which would be easier) as there are so many. If the user requests say menuA, the code will go away and request all the sub menu data from the DB... (this bit is not the problem).
example: http://www.mattfacer.com/test/test.php (click on the links in the first column... they will effectivly toggle the data.
JavaScript Code:
/* array to store what's been loaded */
/* this stops the user calling the data from the database each time the row is shown/hidden */
var loaded = Array();
/* Load the arrays (this would come from the database) */
var sub_rows_1 = Array(
"<td> </td><td>sub1</td><td>sub2</td><td>sub3</td>",
"<td> </td><td>sub5</td><td>sub6</td><td>sub7</td>"
);
var sub_rows_2 = Array(
"<td> </td><td>sub ddd</td><td>sub eee</td><td>sub fff</td>",
"<td> </td><td>suby</td><td>subt</td><td>subu</td>"
);
/* function to show the row (this would fetch from the DB) */
/* ID is the row identifier */
function show_row(id) {
var tbl = document.getElementById("my_table");
var rowIndex = (document.getElementById("row_" + id).rowIndex + 1); //the row which we'll work under
var row_name = eval("sub_rows_" + id);
for (x=0;x<row_name.length;x++) {
var newRow = tbl.insertRow(rowIndex);
newRow.innerHTML = row_name[x];
newRow.className = "class_sub_" + id;
}
loaded.push(id);
}
/* toggle the row (show or hide depending on the row's status) */
function toggle(id) {
if (loaded.indexOf(id) < 0) {
//not added this tree yet, so do it
show_row(id);
} else {
//each sub row is labelled with a classname so it can be reffered to (id is meant to be unique!)
rows = getElementsByClass("class_sub_" + id, document, "tr");
for (x=0;x<rows.length;x++) {
if (rows[x].style.display == "none") {
rows[x].style.display = "block";
} else {
rows[x].style.display = "none";
}
}
}
}
/* find all elements by className */
function getElementsByClass(searchClass,node,tag) {
var classElements = new Array();
if ( node == null )
node = document;
if ( tag == null )
tag = '*';
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
}
HTML code
<table id="my_table" border="1">
<tbody>
<tr>
<td> </td>
<td><strong>Col 1</strong></td>
<td><strong>Col 2</strong></td>
<td><strong>Col 3</strong></td>
</tr>
<tr id="row_1">
<td><a href="#" onClick="toggle(1); return false;">show</a></td>
<td>Data red</td>
<td>Data yekk</td>
<td>Data gren</td>
</tr>
<tr id="row_2">
<td><a href="#" onClick="toggle(2); return false;">clicky</a></td>
<td>Data x</td>
<td>Data y</td>
<td>Data z</td>
</tr>
</tbody>
</table>
any ideas if there is an easier way to hide / show table rows?!! (It HAS to work across all "popular" browsers... even IE :rolleyes: )
BTW: I am aware my example doesnt work in IE! So if anyone knows of a way, that'd be ace. Works ok (ish) in FF....
thanks for any help :)