[JavaScript]Ukrywanie i odkrywanie kolumny w tabeli Opcje

[Flake]

Witam,
Muszę do istniejącej już (generowanej automatycznie) tabeli dorobić opcję z pokazywaniem i chowaniem się jednej kolumny za pomocą jednego guzika. Podejrzewam, że trzeba zmienić styl z np. display: none; na display: table-cell za pomocą JavaScript - Niestety nie mam pojęcia jak odwołać się do konkretnej kolumny za pomocą jednego guzika.

Na internecie znalazłem kilka przykładów ale wszystkie były 'statyczne' - więc odwoływały się przez ID

[HTML] pobierz, plaintext 
<style>
.doukrycia {display: none;}
</style>
 
...
 
<label><input type="submit" value="Pokaz/Ukryj kolumny" /></label>
<table border="1">
<thead>
<tr>
	<th>ID</th>
	<th class="doukrycia">Produkt</th>
	<th>Cena</th>
</tr>
</thead>
<tbody>
{foreach from=$produkty item=produkty}
<tr>
	<td>{$id}</td>
	<td class="doukrycia">{$produkt}</td>
	<td>{$cena}</td>
</tr>
{/foreach}
</tbody>
</table>
[HTML] pobierz, plaintext 

[Flake]

Prawie działa ^^ - niestety znika/pojawi się tylko pierwsza komórka danej kolumny - to chyba przez to, że tabela jest tworzona dynamicznie ponieważ na statycznym przykładzie wszystko działa pięknie - a gdy wrzucam to do php to element TH w ogóle się nie pojawia a TD tylko w pierwszym wierszu - jakieś pomysły jak to naprawić?

[HTML] pobierz, plaintext 
 
<label><input type="submit" value="Ukryj produkty" onclick="ukryj()" /></label><label><input type="submit" value="Pokaz produkty" onclick="odkryj()" /></label>
 
<table id="test" class="tabela" border="0" cellspacing="0">
<thead>
<tr>
	<th>nr dokumentu</th>
	<th style="display: none">produkty</th>
	<th>użytkownik</th>
</tr>
</thead>
 
<tbody>
{foreach from=$produkty item=produkty}
<tr class="{cycle values=',odd-row'}{$tr_class}">
	<td>{$produkty->nr_dokumentu}</td>
	<td style="display: none">
		<table cellspacing="0" class="produkty">
		{foreach from=$proukty->produkty item=produkt}
		<tr>
			<td>{$produkt->nazwa_prod|escape}</td>
			<td>{$produkt->ilosc} szt.</td>
		</tr>
		{/foreach}
		</table>
	</td>
	<td>{$produkty->username}</td>
</tr>
{/foreach}
</tbody>
</table>
[HTML] pobierz, plaintext 

funkcje w JS

[HTML] pobierz, plaintext 
function ukryj() {
	var tr = document.getElementById('test').getElementsByTagName('tr'),td;
 
	for(var i=1; td = tr[i++]; ){
	td.getElementsByTagName('td')[2].style.display = 'none';
	}
 
	th = tr[0];
	th.getElementsByTagName('th')[2].style.display = 'none';
}
 
function odkryj() {
	var tr = document.getElementById('test').getElementsByTagName('tr'),td;
 
	for(var i=1; td = tr[i++]; ){
		td.getElementsByTagName('td')[2].style.display = 'table-cell';
		}
 
	th = tr[0];
	th.getElementsByTagName('th')[2].style.display = 'table-cell';
}
[HTML] pobierz, plaintext 

edit: ok już wiem, że problemem jest zagnieżdżona tabelka - tylko nie wiem jak 'wyłączyć' ją z działania funkcji - jakieś pomysły?

Ten post edytował Flake 18.03.2010, 15:11:58