Demogracia Bits

• • • Colección privada de recortes de código y documentación para programación web

[Sí, aún estamos en pruebas; ¿por?]

Seleccionar nodo

Esta función selecciona todo el texto de un nodo HTML (una tabla, una lista, un párrafo...). El resultado es igual que si lo hubiéramos hecho manualmente arrastrando con el ratón.

/*
 * Crea una selección que engloba el nodo indicado
 */
function seleccionarNodo(nodo){ // v2008-04-23
    // Creamos un rango
    try{
        var rango = document.createRange();
    }catch(e){
        try{
            var rango = document.body.createTextRange();
        }catch(e){
            return;
        }
    }

    // Asignamos texto al rango
    try{
        rango.selectNode(nodo);
    }catch(e){
        try{
            rango.moveToElementText(nodo);
        }catch(e){
            return;
        }
    }

    // Seleccionamos el rango
    try{
        var seleccion = window.getSelection();
        seleccion.addRange(rango);
    }catch(e){
        try{
            rango.select();
        }catch(e){
            return;
        }
    }
}

El código es compatible con Firefox 2 y 3 e Internet Explorer 6 y 7. En Opera 9 y Konqueror 3 no parece funcionar (tampoco hace daño, supongo).

Ejemplos de uso

Con la amable colaboración de las funciones para asignar eventos podemos conseguir que al hacer doble clic sobre cualquier tabla de la página ésta se seleccione entera. Así es facilísimo copiarla al portapapeles y sorprender a amigos y vecinos pegándola en Excel, Word, etc. Nota: este ejemplo no contempla el caso de tablas anidadas; no digo que funcione bien o mal, sólo que ni lo he mirado.

(function(){
    /*
     * Permitimos seleccionar las tablas de la página haciendo doble clic
     */
    var tablas = document.getElementsByTagName("table");
    for(var i=0, len=tablas.length; i<len; i++){
        addEvent(tablas[i], "dblclick", function(){
            seleccionarNodo(this);
        });
    }
})();

Naturalmente, no es imprescindible rebosar tanta sofisticación:

<input type="button" value="Seleccionar" onclick="seleccionarNodo(document.getElementById('foo'))">

Demo

Haz doble clic sobre la tabla. Después puedes copiar la selección y pegarla en tu hoja de cálculo favorita.

EneroFebreroMarzoAbrilMayoJunioJulioAgosto
32,62122,32127,7654,37122,3232,6238,0697,86
214,74141,35225,6289,70165,82100,588,15103,29
228,3424,4629,9040,77209,3138,06247,36239,21
201,1581,5543,49258,2413,5940,77241,93127,76
236,49193,00195,72203,87182,12217,4678,83258,24

Fallos conocidos

En Firefox, al copiar y pegar la selección casi siempre aparece al final una celda de más con un valor repetido salido de la tabla. Dado que es aleatorio y no veo ningún fallo obvio en el código tiendo a pensar que es problema del propio navegador...

Esta página ha sido impresa el domingo 6 de julio de 2008 (22:50:26 +0200) desde http://bits.demogracia.com/recortes/javascript/seleccionar-nodo.html, contenía HTML válido con CSS fresquito la última vez que lo miré y no debería tener flatas de ortografía.

Demogracia Bits no tiene absolutamente ninguna relación con Demogracia, salvo el nombre, el dominio punto com y que el autor es el mismo.

© 2005-2008 by Álvaro G. Vicario (alvaro.es) ¤ Burgos (España) ¤ http://bits.demogracia.com/