[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 

[kamil4u]

Przerób pod własne potrzeby (IMG:style_emoticons/default/smile.gif) :

Kod

<style>
td{ border:1px solid black; }
</style>

<table id="test">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>

<script>
var trs = document.getElementById('test').getElementsByTagName('tr');
for(var i=0, td; td = trs[i++].getElementsByTagName('td')[1]; ){
  td.style.backgroundColor = 'red';
}

</script>

[Flake]

Prawie działa ^^ a mianowicie:

1 - mam w tabeli jeszcze th - ale to chyba można zrobić analogicznie jak z td (chyba ze jest prostszy sposób )
2 - przykład który mi podałeś działa - ale jak włączę konsole JS to mam error:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of undefined

[kamil4u]

Ad1. tak, zrób to analogicznie
Ad2. Nie wiem do końca dlaczego tak, ale zrób:

Kod

<style>
td{ border:1px solid black; }
</style>

<table id="test">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>

<script>
var tr = document.getElementById('test').getElementsByTagName('tr'),td;
for(var i=0; td = tr[i++]; ){
  td.getElementsByTagName('td')[1].style.backgroundColor = 'red';
}

</script>

[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