nicht angemeldet
Hallo.
Ich habe eine Tabelle mit mehreren Dutzend Spalten, die Tabelle ist also sehr viel breiter als das Browserfenster. Deshlab möchte, dass der Benutzer durch Klicken auf eine Spaltenüberschrift (th) die Spalte (col) zugeklappt und solche Spalten wieder aufgeklappt werden.
Dies habe ich dadurch realisiert, dass jedem <th> für onClick eine Funktion mit dem Parameter event aufgerufen wird. Die Funktion hangelt sich dann durch den DOM hoch bis zum <table>-Element und sucht dann nach einem <col> mit dem gleichen Index wie das <th>. Für dieses <col> wird dann die Breite in eine andere Eigenschaft des Elements geschrieben (title ist sicher nicht optimal, sollte aber beim <col> nichts machen.), um sie wiederherstellen zu können. Dann wird die Breite auf 10px gesetzt.
Hier das Skript und die Tabelle:
<script type="text/javascript">
var ns6=document.getElementById&&!document.all;
var ie=document.all;
function switchColumn(e) {
// Browserweiche, um das auslösende Element zu bekommen
source=ie? event.srcElement : e.target
// Spalte sichern, da source überschrieben wird
index = source.cellIndex;
// Im DOM nach oben gehen bis zur Tabelle ...
while(source.nodeName!="TABLE")
source=ns6? source.parentNode : source.parentElement;
nodes = source.childNodes;
// ... und dann die richtige Spalte suchen
for (i = 0; i < nodes.length; i++) {
if (nodes[i].nodeName == "COLGROUP") {
nodes = nodes[i].childNodes;
source = nodes[i];
break;
}
}
source = nodes[index];
// Sicherheitsabfrage. Wenn Spalte nicht gefunden, hier aus der Funktion aussteigen
if (source.nodeName != "COL") {
return;
}
// Prüfen, ob zu- oder aufgeklappt werden muss. Da die Breite der Spalte über <col width=""> definiert werden muss, im IE aber nur über die CSS-Breite geändert werden kann, ist letztere beim Ersten Anklicken der Spaltenüberschrift noch nicht gesetzt.
if (source.style.width == "" || source.style.width > 10) {
// Sichern der Breite zum Aufklappen.
source.title = source.width;
// Reduzieren der Breite auf 10px.
source.style.width = "10";
}
else {
// Wiederherstellen der Breite
source.style.width = source.title;
}
}
</script>
<table border="1" cellpadding="0" cellspacing="0">
<colgroup>
<col width="300" style="width:100" id="left" onclick="alert('Hallo!');" />
<col width="50" style="width:200" id="middle" onclick="alert('Hallo!');" />
<col width="120" style="width:5" id="right" onclick="alert('Hallo!');" />
</colgroup>
<tr id="ignore">
<th height="26" scope="col" onClick="switchColumn(event);">Links</th>
<th scope="col" onClick="switchColumn(event);">Mitte</th>
<th scope="col" onClick="switchColumn(event);">Rechts</th>
</tr>
<tr>
<td height="21">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td height="21">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td height="21">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td height="21">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td height="21">1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
Das Problem ist nun, dass die Spalte mindestens so breit bleibt wie die Zelle mit dem größten Inhalt. Die CSS-Eigenschaft overflow:hidden funktioniert hier scheinbar nicht, weder im IE noch in Firefox. Gibt es da eine Lösung oder zumindest einen Ansatz.
Eine Alternative wäre, die Spalte in eine andere unsichtbare Tabelle zu verschieben und später wieder zurückverschieben. Das gefällt mir aber nicht, weil es auch relativ aufwendig (Code und Rendern) und auch unsicher ist.
Danke für jeden Hinweis.
Gruß Marco