webwork-blog.net

In letzter Zeit hatte ich sehr viel in der Schule zu tun und musste jeden Abend lernen. Ebenso genoss ich die letzten Sommertage mit meiner Freundin . So blieb leider nur sehr wenig Zeit für meinen Blog.

Das Backend meines selbstgeschriebenen Statistikscripts für computerjan.de habe ich durch eine kleine JS-Funktion erweitern können, die ich euch gleich mal “vorstellen” möchte.

Und zwar:

Einzelne Tabellenzellen lassen sich per JavaScript durch Zuweisung der HTML-Eigenschaft display: none relativ leicht ausblenden. Mit ganzen Spalten siehts da schon anderst aus. Also machte ich mich ein bisschen auf selfhtml schlau und kam dann zu diesem Ergebnis:

function spalteAus (colIndex, tableID, headlineID) {
  var table = document.getElementById(tableID);
  for (var r = 0; r < table.rows.length; r++) {
	table.rows[r].cells[colIndex].style.display = "none";
 }  
  document.getElementById(headlineID).style.display = "none";
}
function spalteEin (colIndex, tableID, headlineID) {
  var table = document.getElementById(tableID);
  for (var r = 0; r < table.rows.length; r++) {
	table.rows[r].cells[colIndex].style.display = '';
  }
   document.getElementById(headlineID).style.display = '';
}

Eure Tabelle und Kopfzeile muss eine eindeutige ID bekommen.
Beispiel:

<table id="maintable">
		<tr>
			<th>&Uuml;berschrift 1</th>
			<th>&Uuml;berschrift 2</th>
			<th id="col">&Uuml;berschrift 3</th>
			<th>&Uuml;berschrift 4</th>
			<th>&Uuml;berschrift 5</th>
		</tr>
		<tr>
			<td>2009-09-30</td>
			<td>01:22:42</td>
			<td>Mozilla/5.0 (compatible; Yahoo! Slurp/3.0)</td>
			<td>74.6.8.94</td>
			<td>/pages/photoshopkunst.html</td>
		</tr>
		<tr>
			<td>2009-09-30</td>
			<td>01:23:10</td>
			<td>Mozilla/5.0 (compatible; Yahoo! Slurp/3.0)</td>
			<td>74.6.8.94</td>
			<td>/pages/bildergalerie.html</td>
		</tr>
</table>

Die Useragents sind gekürzt und dienen nur als Beispiel !

Zur Anwendung könnt ihr die Funktion mit folgenden Parametern aufrufen:

<button type="button" onclick="spalteAus(2, 'maintable', 'col');">Ausblenden</button>
<button type="button" onclick="spalteEin(2, 'maintable', 'col');">Einblenden</button>

Parameter 1 ist eine Ganzzahl, die die Spalte angibt, die ausgeblendet werden soll (es wird bei 0 angefangen zu zählen !)
Parameter 2 ist ein String, der die ID der kompletten Tabelle enthält.
Mit dem dritten Parameter wird der Mini-Funktion die ID der Kopfzeile als String übergeben.

P.S.
Nicht wundern, das es in nächster Zeit so wenige Beiträge gibt… Schule geht bei mir erst mal vor

Wer den Besuchern seiner Website Möglichkeiten geben will, die Seite nach eigenen Wünschen anzupassen ist mit einem einfachen Styleswitcher normalerweise gut bedient. Meistens aktiviert dieser per PHP oder JavaScript den alternate stylesheet und speichert den aktuellen Style in einem Keks (=Cookie). Der User kann fast immer zwischen einer dunkleren, helleren oder farbenfroheren Variante hin und herschalten. Um nur die Schriftart der Site zu ändern reicht schon JavaScript. Wer das ganze aber etwas professioneller machen will, muss mit PHP kombinieren.

In diesem How-To werden wir einen von mir so benannten
“Typoswitcher” (Typo = Abk. für Typografie=Schriftarten,etc.. + Switcher = engl. für Schalter) bauen, mit Speicherung der Schriftart mithilfe Cookies und einer Auswahlliste für die Schriftarten in HTML.

Mehr…