Archiv

Artikel Tagged ‘Javascript’

HTML Tabellenspalten per JavaScript ausblenden

30. September 2009 Jan Keine Kommentare

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 :D !)
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 :-)

KategorienJavascript Tags: , ,

Schriftartenwechsler/Typoswitcher mit PHP und Javascript

11. Juni 2009 Jan Keine Kommentare

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…

Beschreibung der Linklistenlinks als Tooltipp anzeigen

27. Mai 2009 Jan Keine Kommentare

Die Beschreibungen der Hyperlinks in der Linkliste in der Sidebar von Wordpress werden standardmäßig bei aktiviertem show_descriptions in der Funktion
wp_list_bookmarks neben den eigentlichen Links angezeigt.
Dies wollte ich natürlich gleich mal verschönern :-) . Statt der langweiligen Darstellung neben den Links, habe ich die Beschreibung in einen hübschen JavaScript-Tooltipp gepackt.
Mehr…