Maxonico's Blog

lunes, octubre 09, 2006

Haciendo grillas mas lindas

Con esta funcioncita en Javascript podran hacer que sus tablas en HTML queden mas vistosas, ademas, combinando esto con el GridView pueden obtener resultados muy interesantes. La funcion lo que hace es un "highlight" o "iluminado" de la fila cuando uno le pasa el mouse por encima, y cambiarle el color de fondo a la fila cuando esta es seleccionada, he aqui la funcion, recuerden agregarle los tags SCRIPT y el language=JavaScript:

var bgcolor='#6699cc';var prevrow;var prevbgcolor; var savebgcolor; var savefontcolor; function OnRowClick(row,id){ if (prevrow!=null) {prevrow.style.backgroundColor = savebgcolor; prevrow.style.color = savefontcolor}; if (prevbgcolor!=bgcolor) {savebgcolor=prevbgcolor;} savefontcolor=row.style.color; row.style.backgroundColor=bgcolor; row.style.color='#ffffff'; prevbgcolor=row.style.backgroundColor; prevrow=row; if (window.OnClick) {OnClick(id);} }
function OnClick(pID){ alert(pID) }
Perdon que salga amontonado, pero este motor de Blog no es muy bueno que digamos para la edicion.

Como veran, esta funcion OnRowClick recibe 2 parametros, la fila en cuestion y un ID, el ID es opcional, lo pueden borrar (borrandolo en todos lados donde se haga referencia a el), cuando se selecciona una fila esta queda marcada y se llama a un Alert del "ID" seleccionado (funcion OnClick).

La funcion OnRowClick es llamada, de la siguiente forma en el click de la fila de nuestra tabla:


Tambien se aprecian otros 2 eventos, onmouseover y onmouseout, que son los responsables del "highlight" de la fila cuando pasamos el mouse sobre ella.

Saludos!