Jeder kennt den Effekt der gestreiften Tabelle. Sind die Zeilen abwechselnd in unterschiedlichen Farben, verliert man nicht so einfach den Überblick. Oftmals wird diese nette optische Unterstützung serverseitig (z.B.: in PHP) gelöst, aber manchmal ist es doch einfacher es mit JavaScript zu erledigen.

Doch wie macht man das nun einfach in JavaScript? Ich werde nun erklären wie das geht und einige Erweiterungen dazu geben.

Ich möchte hier kurz erwähnen, dass ich auch einige Ideen aus dem Internet habe, jedoch die Quellen nicht mehr finden kann! Sollte ich die Seite finden die mir den Anstoß gegeben hat, werde ich sie natürlich als Quelle führen!

Leider gibt es das Problem, dass CSS Eigenschaften auf der Tabellenreihe nicht ziehen. Deswegen färben wir jede Tabellendata (<td>)  einzeln.

/**
* Funktion zum streifen einer Tabelle
* @param id: Die Tabelle muss über eine ID verfügen und die wird hier übergeben
*/
function stripe(id) {
	//Variable fürs Farbwechseln
	var even = false;
	//Farbe für ungerade Zeilen
	var evenColor = "#ffffff";
	//Farbe für gerade Zeilen
	var oddColor = "#eeeeff";
	//Wir holen uns das Objekt der Tabelle
	var table = document.getElementById(id);
	//Wenn wir keine Tabelle erhalten haben, dann ist hier Ende
	if(! table) { return; }
	//Wir wollen nur den Tabllenbody streifen.
	var tbodies = table.getElementsByTagName("tbody");
	//Wichtig hier ist es, dass es laut Definition mehrere tbodys geben kann! Deswegen die Schleife
	for (var h = 0; h < tbodies.length; h++) {
		//Wir holen uns die Reihen
		var trs = tbodies[h].getElementsByTagName("tr");
		//Wir laufen eine Reihe nach der anderen durch
		for (var i = 0; i < trs.length; i++) {
			//Wir laufen nun alle Tabellendata durch
			for (var j = 0; j < tds.length; j++) {
				//Jetzt noch schnell den Hintergrund färben
				tds[j].style.backgroundColor = even ? evenColor : oddColor;
			}
			//Farbwechsel realisieren
			even =  ! even;
		}
	}
}

Ist jetzt glaube ich nicht so schwer. Deswegen werden wir diese Funktion erweitern!

Nehmen wir einmal an, wir wollen über ein PHP Script bestimmte Zellen schon vorfärben die unsere Funktion nicht ändern soll. Das heißt es sollen nur die geändert werden die keine Hintergrundfarbe besitzten.

Auch das ist noch relativ einfach gemacht. Wir müssen dazu nur eine if verzweigung vor dem färben hinzufügen

for (var j = 0; j < tds.length; j++) {
				if(!tds[j].style.backgroundColor){
					tds[j].style.backgroundColor = even ? evenColor : oddColor;
				}
			}

Das war einmal Teil I des Berichts. Im zweiten Teil zeige ich euch dann, wie man markierungen von Zeilen mit einer erweiterten Variante der Funktion realisieren kann.

Ebenso zeig ich euch eine Einfach variante mit der man auf unterschiedlichen Farben reagieren kann.

Denn leider ist es nicht möglich mit einem

if(tds[j].style.backgroundColor == "#FFFFFF")

zu vergleichen. Vor allem weil wenn man mit einem

alert(tds[j].style.backgroundColor);

Im InternetExplorer den Hexwert erhält und im FireFox einen rgb wert.
Freut euch schon auf Teil 2

Seit über 2 Jahren gibt es bereits das Office 2007 Paket. Microsoft brachte es gleichzeitig mit dem Betriebssystem Windows Vista am 30. Jänner 2007 heraus. Doch noch immer stelle ich fest, dass es Personen gibt, die das 2003 vorziehen.

Wenn man diese Frage wirklich auf Privatanwender auslegt, ist die Begründung oftmals die Bedienung. War doch die Menüführung von Office 2003  anders als die von 2007. Damals lernte man mühsam am Word 2003 wo die Menüpunkte versteckt waren und wie man sich sein Dokument zusammenbastelt.

Dabei hat Microsoft für den Umstieg interaktive Referenzhandbücher angelegt! Unter http://office.microsoft.com/de-at/word/HA100744321031.aspx kann man zum Beispiel das für Word öffnen.

Als Hauptansicht ist die Menüleite des alten Words zu sehen. Wählt man einen Menüpunkt aus, zeigt einem das Handbuch wo er nun im Word 2007 zu finden ist. Wer also willens ist umzulernen hat hiermit ein echt nettes Tool zur Verfügung.

Ich muss zugeben: Als ich meine erste größere Arbeit mit Word 2007 geschrieben hatte, war ich auch ein wenig frustriert. Es war ungewohnt und man lernt nicht gerne um, wenn man eigentlich wichtigeres zu machen hat. Allerdings ist es meiner Meinung nach wirklich einfacher zu bedienen!

Ebenso ärgerlich ist (passend zu dem Thema), dass noch immer nicht alle Leute in der Lage sind die neuen Dateiformate von Office 2007 zu öffnen. Also wenn ich davon ausgehe, dass der Empfänger es nur lesen möchte, schicke ich ein PDF, aber sonst muss er mit einem docx oder xlsx rechnen.

Die Hauptausrede Nr 1, warum man diese nicht öffnen kann? Ich habe leider nur Office 2003!

Aber Leute!
Dafür gibt es doch schon seit Ewigkeiten ein Update. Unter http://office.microsoft.com/de-at/word/HA100744321031.aspx kann man es downloaden und installieren. Damit kann man alle neuen Dateiformate im alten Office öffnen.

Warum allerdings einige Firmen das auch noch nicht installiert haben, ist mir ebenso ein Rätsel.

Naja soviel zum Ärger mit dem “neuen” Office 2007

Es gibt bereits sehr viele Scripte die Bilder vorladen mit oder ohne Statusanzeige.

Allerdings sind mir diese oft zu groß oder gewesen oder haben nur alle Bilder geladen die bereits über einen <img> Tag in der Homepage waren. Ich brauchte aber ein sehr kleines Script, da es auf mobilen Endgeräten ausgeführt werden sollte. Und es sollte nicht automatisch alle Bilder laden sondern erst auf Knopfdruck.

Leider habe ich dann nichts mehr passendes gefunden, deshalb habe ich mir folgende Funktionen selber geschrieben.

Das preloading wird erst ausgelöst wenn man die Funktion startPreloading() aufgerufen wird. Dann wird der Browser durch das erzeugen eines neuen Bilders und dem zuweisen einer URL dazu veranlasst dieses Bild zu laden. (Eigentlich erst durch das zuweisen der URL)

Über das Attribut “complete” kann nun überprüft werden ob das Laden beendet ist. Ein counter zählt die fertigen durch. Sind alle fertig geladen, dann wird die Funktion doSomething() aufgerufen. Wichtig dabei ist, dass man die 250ms pause beibehält. Denn wenn man keine Pause einbaut, erzeugt man ein Script, welches den Browser blockiert bis es fertig ist!

//Liste der Bilder
var global_imageList = new Array("bild1.jpg","bild2.jpg","bild3.jpg");
//Funktion die das Preloading startet
function startPreloading(){
	//Statusmeldung aktualisieren
	document.getElementById("status").innerHTML = "Lade Bilder für Animation...";
	pictures = new Array();
	if(global_imageList != null && global_imageList.length > 0){
		//Jedes Bild laden
		for(i=0;i<global_imageList.length;i++){
			tmp_img = new Image();
			tmp_img.src = url;
			pictures[i] = tmp_img;
		}
	}
	//Funktion zum kontrolieren aufrufen
	preloading(pictures);
}

function preloading(pictures){
	counter = 0;
	for(i=0;i<pictures.length;i++){
		if(pictures[i].complete){
			counter++;
		}
	}
	//Wenn alle Bilder geladen sind
	if(counter == pictures.length){
		//Jetzt sind alle Bilder geladen, also:
		doSomething();
	//Sonst status
	} else {
		document.getElementById("status").innerHTML = "Lade Bilder für Animation... ("+counter+"/"+pictures.length+")";
		//Eine Pause einlegen, sonst bleibt das Script hängen
		setTimeout(function(){preloading(pictures);},250);
	}
}

Das Script ist nun auch einfach anzupassen. Man muss nur die global_Imagelist mit seinen Bildern einfügen. Die Statusanzeige Passiert als text, indem der <div> Block mit dem Namen “Status” verändert wird.