Gatis Tomsons

rocket science

Tabulu rindu krāsošana ar Prototype

Bieži attēlojot datus tabulā tie nav ļoti labi pārskatāmi, jo dažkārt tabula ir ļoti plata ar daudz kolonnām, tādējādi ir grūti saprast, kur rinda sākas un kur tā īsti beidzas. Tāpēc ir ļoti patīkami, ja uzklikšķinot uz rindas tā iekrāsojas un uzklikšķinot vēlreiz tā iegūst iepriekšējo izskatu.

Pirmais ko izdaram ir izveidojam divas CSS klases, vienu kad rinda ir aktīva un vienu, kad nav aktīva:

.row_normal {
	background-color: #fff;
}
.row_higlighted {
	background-color: #f5f5f5;
}

Kā nākamo mēs varētu izveidot pašu tabulu, kurai piešķiram arī ID atribūtu, manā gadījumā id="dati". Kad tabula ar datiem ir izveidota, kā arī CSS ir ielikt pareizā vietā, tad atliek vien izveidot šo JavaScript koda gabalu:

window.onload = function(){
	var rows = $('dati').getElementsByTagName('tr');
	var nodes = $A(rows);
	
	nodes.each(function(node){
		Event.observe(node, 'click', function(event){
			if(Element.hasClassName(node, 'row_higlighted')){
				Element.removeClassName(node,'row_higlighted');
				Element.addClassName(node, 'row_normal');
			}else{
				Element.removeClassName(node,'row_normal')
				Element.addClassName(node, 'row_higlighted');	
			}
		});
	});
}

kuru ievietojam kaut kur starp HEAD tagiem. Un tas ir arī viss, pārlādējot lapu, mūsu koda gabals katrai tabulas rindai piešķirs notikumu onclick="", kurš izpildīsies uzspiežot uz tās.

Piemirsu pašu galveno, viss augšup minētais darbojas pateicoties Prototype bibliotēkai, kuru nepieciešams iekļaut virs šī skripta.

EDIT: atradu gatavu risinājumu šeit