zeilen und spalten einer tabelle ein- und ausblenden lassen

[DeWitt]

moin!

ich würde mir mal display: none anschauen, dazu noch ein wenig JS.

schon klar, aber lassen sich td's einfach so ausblenden? die frage ist dann, wie koordiniert man das (komando "spalte x ausblenden" oder "zeile y ausblenden")?

Mit CSS wurde ja schon eine Lösung angeboten (find ich fast schöner wie meine), aber falls dir Javascript auch recht ist:

  
var tabid = 'tab1';  
  
function toggleCol (iNumber) {  
 var TABLE = document.getElementById(tabid);  
 var TR = TABLE.getElementsByTagName("tr")[iNumber];  
 if(TR.style.display == 'none') TR.style.display = '';  
 else TR.style.display = 'none';  
}  
  
function toggleRow (iNumber) {  
 var TABLE = document.getElementById(tabid);  
 var TRs = TABLE.getElementsByTagName("tr");  
 var TH = TRs[0].getElementsByTagName("th")[iNumber];  
 if(TH.style.display == 'none') TH.style.display = '';  
  else TH.style.display = 'none';  
  
 for(var i=1;i<TRs.length;i++) {  
  var TD = TRs[i].getElementsByTagName("td")[iNumber-1];  
  if(TD.style.display == 'none') TD.style.display = '';  
  else TD.style.display = 'none';  
 }  
}  

Mit diesen Funktionen kannst du folgende Tabelle modifizieren:

  
  
<TABLE id="tab1" border="1" cellspacing="0" cellpadding="5"><TR>  
 <TH>&nbsp;</TH>  
 <TH>Spalte 1</TH>  
 <TH>Spalte 2</TH>  
  
</TR><TR>  
 <TH id="tha" style="border:1 solid red;">Zeile a</TH>  
 <TD>Wert 1a</TD>  
 <TD>Wert 2a</TD>  
  
</TR><TR>  
 <TH>Zeile b</TH>  
 <TD>Wert 1b</TD>  
 <TD>Wert 2b</TD>  
  
</TR></TABLE>  
  
<A href="javascript:toggleRow(1);">Spalte 1 ein/aus</A>  
<A href="javascript:toggleRow(2);">Spalte 2 ein/aus</A>  
  
<BR>  
  
<A href="javascript:toggleCol(1);">Zeile a ein/aus</A>  
<A href="javascript:toggleCol(2);">Zeile b ein/aus</A>