Products
A Software Developer's Blog
Hide dynamically generated table rows
If your trying to use javascript DHTML to hide and show multiple generated dynamic table rows with one link/button you may find yourself pulling your hair out. Surrounding the tr's with a div won't work. And giving the tr itself an id and doing it that way won't work because there will be more than one. Then if you try to dynamically name the id's and loop through them; nightmare!!
Tbody to the rescue. I hate tbody's. I never use them and despise when word html includes them. But this is the one time I can think of a good use for it. Surround your dynamically created tr's with one of these, give it an id, and use that to hide and show all the rows at one time.
code example:
function display(elementid){
if(document.getElementById(elementid).style.display == "none"){
document.getElementById(elementid).style.display = "inline";
}else{
document.getElementById(elementid).style.display = "none";
}
}
</script>
<table>
<tr><td>Rows of data: (<a href="#" onclick="display('hidden');">Click to view rows</a>)</td></tr>
<tbody id="hidden" style="display:none">
<!---dynamically generated rows of data--->
<tr><td>row 1</td></tr>
<tr><td>row 2</td></tr>
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>
</tbody>
<tr><td>End of data rows</td></tr>
</table>
thanks
Aura skin for Clint Willard's BlogCFC inspired by Brooks Bilson's Bolg.
All trademarks property of their owners.