medoix medoix - 6 days ago 8
HTML Question

Collapse Tables with specific Table ID? JavaScript

I have the below JS at the top of my page and it successfully collapses ALL tables on load.
However I am trying to figure out how to only collapse

<table id="ctable">
tables with the ID of "ctable" or is there some other way of specifying the tables to make collapsible etc?

<script type="text/javascript">

var ELpntr=false;
function hideall()
{
locl = document.getElementsByTagName('tbody');
for (i=0;i<locl.length;i++)
{
locl[i].style.display='none';
}
}

function showHide(EL,PM)
{
ELpntr=document.getElementById(EL);
if (ELpntr.style.display=='none')
{
document.getElementById(PM).innerHTML=' - ';
ELpntr.style.display='block';
}
else
{
document.getElementById(PM).innerHTML=' + ';
ELpntr.style.display='none';
}
}
onload=hideall;
</script>


HTML echo'd using PHP this is in a for statement looping and there could be multiple tables.

echo "<table id=\"ctable\">"
."<thead><tr><th>"
."<a href=\"#\" onclick=\"showHide('show".$show->showid."','span".$show->showid."')\"><span id=\"span".$show->showid."\"><img src=\"images\icon_collapse.gif\"></span><span>".$show->showname."</span></a>"
."</th></tr></thead>";
echo "<table><tbody id=\"show".$show->showid."\">"
."<tr><td rowspan=\"8\"><a class=\"thumbnail\" href=\"#thumb\"><img src=\"".$show->image."\" height=\"150px\" width=\"150px\"><span><img src=\"".$show->image."\"/><br/>".$show->showname."</span></a></td><td rowspan=\"8\"><img class=\"line\" width=\"2\" height=\"100%\"></td><td class=\"jralign\">Show ID:</td><td>".$show->showid."</td></tr>"
."<tr><td class=\"jralign\">Show Link:</td><td><a href=\"".$show->showlink."\">".$show->showlink."</a></td></tr>"
."<tr><td class=\"jralign\">Started (Year):</td><td>".$show->started."</td></tr>"
."<tr><td class=\"jralign\">Ended (Year):</td><td>".$yearended."</td></tr>"
."<tr><td class=\"jralign\">Seasons:</td><td>".$show->seasons."</td></tr>"
."<tr><td class=\"jralign\">Classification:</td><td>".$show->classification."</td></tr>"
."<tr><td class=\"jralign\">Network:</td><td>".$show->network."</td></tr>"
."<tr><td class=\"jralign\">Status:</td><td>".$show->status."</td></tr>"
."</tfoot></table>"
."</table><br/>";

Answer

Not sure if what i did was the correct way, but it works.

All i did was change the <tbody> html tag inside the <table> to <tfoot> and updated my original javascript to look for the tfoot element instead and now only those tables collapse and not the others.

If anyone know if there will be issues in regards to this or cares to explain to me why this is, that would be excellent.