Laburno

Ho trovato un tutorial molto carino su come decorare dinamicamente le tabelle con i CSS, che vi giro subito: How to create a table like Orbitz’s airline flights scheduling and pricing matrix.

L’articolo è di AskTheCSSGuy.com, un ottima risorsa sui fogli di stile. Peccato che scriva poco.

Specificatamente si cerca una soluzione al problema di come evidenziare, in una tabella, al mouseover su una cella, gli indici di riga e colonna. Per meglio capire date un’occhiata allo screenshot, oppure guardatevi direttamente l’esempio finale.Viene spiegato come questo non sia possibili utilizzando soltanto :hover, ma occorra ricorrere anche a javascript. La soluzione proposta consiste nell’aggiungere (e nel togliere) dinamicamente, al passaggio del mouse, una classe .on alle celle da evidenziare. Tale classe descriverà semplicemente un diverso colore di background, ma per personalizzare l’esempio si possono ricreare infiniti effetti.

Il javascript a cui si fa riferimento, si divide in cinque parti:

1. Una funzione getElementsByClassName, che serve per bersagliare tutti gli elementi di una classe data.
2. Una funzione addClassName, che serve per aggiungere una classe ad un elemento (nel nostro caso sarà la classe on).
3. Una funzione removeClassName, come sopra al contrario (cioè toglie).
4. Una funzione addLoadEvent, per attivare questi effetti al caricamento pagina invece che sporcare il markup ricorrendo ad innumerevoli onmouseover e onmouseout.
5. Una funzione personalizzata per raggruppare tutto il necessario (makeTheTableHeadsHighlight)

Ed ecco quest’ultima, in tutto il suo splendore:

function makeTheTableHeadsHighlight() {
	// get all the td's in the heart of the table...
	var table = document.getElementById('rockartists');
	var tbody = table.getElementsByTagName('tbody');
	var tbodytds = table.getElementsByTagName('td');

	// and loop through them...
	for (var i=0; i
// take note of their default class name
		tbodytds[i].oldClassName = tbodytds[i].className;

	// when someone moves their mouse over one of those cells…
		tbodytds[i].onmouseover = function() {

	// attach ‘on’ to the pointed cell
			addClassName(this,’on’);

	// attach ‘on’ to the th in the thead with the same class name
			var topheading = getElementsByClassName(this.oldClassName,’th’,table);
			addClassName(topheading[0],’on’);

	// attach ‘on’ to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName(’th’)[0];
			addClassName(rowheading,’on’);
		}

	// ok, now when someone moves their mouse away, undo everything we just did.

		tbodytds[i].onmouseout = function() {

	// remove ‘on’ from this cell
			removeClassName(this,’on’);

	// remove ‘on’ from the th in the thead
			var topheading = getElementsByClassName(this.oldClassName,’th’,table);
			removeClassName(topheading[0],’on’);

	// remove ‘on’ to the far left th in the same row as this cell
			var row = this.parentNode;
			var rowheading = row.getElementsByTagName(’th’)[0];
			removeClassName(rowheading,’on’);
		}
	}
}

Aggiungete ai preferiti gente.