Micaela 2 de septiembre de 2008 a las 15.30
   Imprimir artículo
elWebmaster.com

Efecto para resaltar las filas de tus tablas


En distintos sitios web habrás visto en las tablas que al pasar el ratón por encima de una fila, toda la fila se remarca.  Gracias a Dhtml Goddies podrás crear una tabla con ese efecto y, también, con la posibilidad de que al hacer clic cobre una de las filas esta quede remarcada permanentemente.

Puedes ver una demostración del resultado final aquí. Como habrás observado allí se cambian tanto el color de fondo de la fila como el de la letra. En realidad puedes modificar cualquier atributo que permita CSS. Por ejemplo es posible agregar subrayado o cambiar la fuente.

Para hacerlo sencillamente debes definir los estilos CSS de tu tabla normalmente y adem√°s definir dos estilos m√°s con los nombres que desees. Uno para el efecto al pasar con el mouse sobre una fila y otro para cuando se hace clic. Por ejemplo:

.tableRollOverEffect{
/*Efecto cuando el mouse pasa por encima*/
background-color:#317082;
color:#FFF;
}

.tableRowClickEffect{
/*Efecto cuando se ha realizado clic*/
background-color:#F00;
color:#FFF;
}

Cuando realizas el código HTML de tu tabla es importante que le asignes un id de la siguiente forma

<table id="myTable">.

En la sección head de tu página debes agregar el siguiente código, o bien puedes guardarlo en un archivo js y luego enlazarlo.

<script type="text/javascript">
/*************************************************************************
(C) www.dhtmlgoodies.com, November 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
*************************************************************************/    var arrayOfRolloverClasses = new Array();
var arrayOfClickClasses = new Array();
var activeRow = false;
var activeRowClickArray = new Array();
function highlightTableRow()
{

var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(this!=activeRow){
this.setAttribute('origCl',this.className);
this.origCl = this.className;
}

this.className = arrayOfRolloverClasses[tableObj.id];
activeRow = this;
}

function clickOnTableRow()
{

var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;

if(activeRowClickArray[tableObj.id] && this!=activeRowClickArray[tableObj.id]){
activeRowClickArray[tableObj.id].className='';
}

this.className = arrayOfClickClasses[tableObj.id];
activeRowClickArray[tableObj.id] = this;

}
function resetRowStyle()
{

var tableObj = this.parentNode;
if(tableObj.tagName!='TABLE')tableObj = tableObj.parentNode;
if(activeRowClickArray[tableObj.id] && this==activeRowClickArray[tableObj.id]){
this.className = arrayOfClickClasses[tableObj.id];
return;
}

var origCl = this.getAttribute('origCl');
if(!origCl)origCl = this.origCl;
this.className=origCl;
}

function addTableRolloverEffect(tableId,whichClass,whichClassOnClick)
{

arrayOfRolloverClasses[tableId] = whichClass;
arrayOfClickClasses[tableId] = whichClassOnClick;
var tableObj = document.getElementById(tableId);
var tBody = tableObj.getElementsByTagName('TBODY');
if(tBody){

var rows = tBody[0].getElementsByTagName('TR');
}else{

var rows = tableObj.getElementsByTagName('TR');
}

for(var no=0;no<rows.length;no++){
rows[no].onmouseover = highlightTableRow;
rows[no].onmouseout = resetRowStyle;

if(whichClassOnClick){
rows[no].onclick = clickOnTableRow;
}

}
}

</script>+

Por √ļltimo tan solo deber√°s utilizar la siguiente l√≠nea para dar todo por terminado.

addTableRolloverEffect('myTable','tableRollOverEffect','tableRowClickEffect');

Donde myTable es el id de la tabla y tableRollOverEffect junto a tableRowClickEffect son los estilos a utilizarse.

Y con este poco trabajo ya tendr√°s el efecto creado y podras utilizarlo en todas las tablas que desees.

Fuente: DHtml Goodies


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (16)

  1. DexterNica dice:

    Donde se coloca “addTableRolloverEffect(‘myTable’,’tableRollOverEffect’,’tableRowClickEffect’);”.
    Tengo problemas, no obtengo ningun resultado.

  2. HERNAN dice:

    Yo estoy usundo php+ajax y donde mostrar el resultado para no recargar la pagina pero no me funciona pero lo probe sin usar ajax como puedo solucionar este problema te paso el codigo
    en la pagina original tengo un div en donde coloco el resultado de la petision del ajax y te paso el codigo del resultado pero no esto no funciona con ajax pero si probando la pagina.

    Documento sin título

    .tableRollOverEffect1{
    background-color:#317082;
    color:#FFF;
    }

    .tableRowClickEffect1{
    background-color:#F00;
    color:#FFF;
    }

    Resultado de la Busqueda

    Nombre
    Apellido
    Razon Social
    Domicilio

    0){
    do{
    ?>

    <a href=”editarcliente.php?id_cliente=”>

    NO SE ENCONTRARON REGISTROS

    addTableRolloverEffect(‘myTable’,’tableRollOverEffect1′,’tableRowClickEffect1′);
    //addTableRolloverEffect(‘myTable2′,’tableRollOverEffect2′,’tableRowClickEffect2’);

  3. ADGAMO dice:

    Muy claro el código, pero en que parte se coloca
    addTableRolloverEffect(‘myTable’,’tableRollOverEffect’,’tableRowClickEffect’); ???

    Gracias!!!!

  4. Daniela dice:

    @Adgamo, @Dexternica: La instrucción habría que colocarla al final del archivo, junto antes de la etiqueta

    1. </html>

    , encerrada entre tags

    1. <script></script>
  5. ADGAMO dice:

    Hola Daniela… muchas gracias por la informaci√≥n, pero sigue sin funcionarme… Porfis podr√≠as pegarme otra ayudadita??? El c√≥digo involucra una tabla din√°mica que se llena desde una bd… le inclu√≠ todo el c√≥digo de ejemplo, pero no hace nada…

    Gracias.

  6. esme dice:

    Buenisimo tuto… me funciono a la perfeccion y le da un efecto muy profesional a mis paginas

  7. esme dice:

    Tengo otra duda, como puedo hacer para que el codigo lo guarde en un archivo .JS y despues llamarlo desde mi pagina html… porfa alguna idea

  8. Juan dice:

    Funciona perfecto…. Gracias hermano me ayudo mucho

  9. carlos dice:

    Necesito luego borrar los datos de esa fila seleccionada, ahora no se como puedo hacer para identificar la fila y enviar a mi controlador en java. agradezco de antemano

  10. carlosmercado dice:

    no funciona nada no me aparece nada, uso firefox

  11. ariel dice:

    graciaaaaass me sirvio muy buen aporte,pero como hago cuando quiero mostrar la tabla de una consulta de bd y yo al seleccionar la fila pueda realizar alguna otra funcion como por ejemplo modificar esa fila

  12. Facundo dice:

    Hola muy bien el codigo me funciono perfectamente, solo tengo un problema o duda sin color en la tabla me funciona muy bien pero si cambio el color de las celdas intercambiado no funciona me deja el color que yo le asigne solo cambia el color de la letra como puedo hacer para que aun yo asignando un color cambie al color que tiene la funcion

  13. Facundo dice:

    Acabo de resolverlo

  14. Erik dice:

    Muchas gracias.
    Funciona a la perfección.
    Saludos cordiales.

  15. Ricardo Martinez dice:

    Yo lo hice con dos lineas de codigo…

    $(“#example”).find(“tr”).click(function(){
    var id = this.id;
    $(“#example”).find(“td”).css(“background-color”, “#fff”, “important”);
    $(this).find(“td”).css(“background-color”, “#EAF7FB”, “important”);
    });
    Funciona 101%

  16. Ricardo Martinez dice:

    #example es el id de la tabla

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder