Javascript-форум - Не получается вывести возвращаемое функцией значение

При скрытии колонок их номера заносятся в str.. я хочу вывести эти номера в отдельном div (при нажатии на ++++).. див выводится пустой.. где ошибка?

Код:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

</head>

<script type="text/javascript">

var str='';

function toggle(obj) {

debugger;

hidden_groups();

var el = document.getElementById(obj);

el.style.display = (el.style.display != 'none' ? 'none' : '' );

}



function hidden_groups() {

debugger;

   var tbl  = document.getElementById('table_id');

var rows = tbl.getElementsByTagName('tr');

var cels = rows[0].getElementsByTagName('th');

for (var i=2; i < 6; i++) {

if (cels[i].style.display == 'none') {str += 'number'+ i +'<br />'}

};

return str;

}



function show_hide_column(btn,gr_name) {

//debugger;

var gr_no;

switch (gr_name) {

case "Sales" :

  gr_no = 2;

  break;

case "HR" :

  gr_no = 3;

  break;

case "CSC" :

  gr_no = 4;

  break;

case "AD" :

  gr_no = 5;

  break;

case "FD" :

  gr_no = 6;

  break;

default : alert('The nonexistent group is chosen !')

}



   var tbl  = document.getElementById('table_id');

var rows = tbl.getElementsByTagName('tr');

stl = btn.checked ? '' : 'none';



// Group Name

var cels = rows[0].getElementsByTagName('th')

cels[gr_no].style.display=stl;

}



</script>



<body>

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#000000" id="table_id">

<tr>

   <th bgcolor="#999999" scope="col" onclick="toggle('sh_div')">++++</th>

   <th bgcolor="#999999" scope="col">General</th>

   <th bgcolor="#999999" scope="col"><input type=checkbox id="gr2" onClick="show_hide_column(this,'Sales')" checked>&nbsp;Sales</th>

   <th bgcolor="#999999" scope="col"><input type=checkbox id="gr3" onClick="show_hide_column(this,'HR')" checked>

   HR</th>

   <th bgcolor="#999999" scope="col"><input type=checkbox id="gr4" onClick="show_hide_column(this,'CSC')" checked>

   CSC</th>

   <th bgcolor="#999999" scope="col"><input type=checkbox id="gr5" onClick="show_hide_column(this,'AD')" checked>&nbsp;AD</th>

   <th bgcolor="#999999" scope="col"><input type=checkbox id="gr6" onClick="show_hide_column(this,'FD')" checked>&nbsp;FD</th>

</tr>

</table>

<!-- hidden div -->

<div align="center" id="sh_div" style=" top:240px; HEIGHT:10px; WIDTH:150px; display:none; position:absolute" onclick="toggle('sh_div')">

<table border="0" width="100%" bgcolor="#000000"

cellspacing="1" cellpadding="2">

<TBODY>

<tr>

<td align="middle" bgcolor="#FFFFE1">

<script type="text/javascript">

//hidden_groups();

document.write(hidden_groups());

</script>

</td>

</tr>

</TBODY>

</table>

</div>

</body>

</html>