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){ // v2009-07-22

    // Creamos un rango

    try{ // FF

        var rango = document.createRange();

    }catch(e){

        try{ // IE

            var rango = document.body.createTextRange();

        }catch(e){

            return;

        }

    }

    // Asignamos texto al rango

    try{ // FF

        rango.selectNode(nodo);

    }catch(e){

        try{ // IE

            rango.moveToElementText(nodo);

        }catch(e){

            return;

        }

    }

    // Seleccionamos el rango

    try{ // FF

        var seleccion = window.getSelection();

        seleccion.removeAllRanges(); // Eliminar selección actual

        seleccion.addRange(rango);

    }catch(e){

        try{ // IE

            rango.select();

        }catch(e){

            return;

        }

    }

}

El código es compatible con Firefox 2+, Internet Explorer 6+ y Google Chrome. En Konqueror 3 no parece funcionar (tampoco hace daño, supongo). En Opera funciona de forma incorrecta.

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.

Enero	Febrero	Marzo	Abril	Mayo	Junio	Julio	Agosto
260,96	217,46	222,90	190,28	70,68	81,55	168,53	116,89
250,08	62,52	141,35	8,15	168,53	106,01	233,77	16,31
214,74	38,06	271,83	2,72	233,77	231,05	146,79	38,06
220,18	127,76	173,97	247,36	138,63	35,34	95,14	247,36
244,65	271,83	173,97	269,11	165,82	95,14	108,73	152,22

Fallos conocidos

En Opera 9 selecciona la tabla... y el resto del HTML hasta el final del documento. Además no es recomendable asignar un doble clic a la tabla porque interfiere con un menú del propio programa.

En Opera 10 no parece hacer nada.

En Opera 11 han arreglado lo anterior pero han estropeado más el resto: el texto queda resaltado pero no es una selección real (ni se copia al portapapeles ni se deshace al hacer clic en otro lugar).

Lo sé: usar try y catch para detectar funcionalidades roza la cutrez más absoluta...

Historial

v2009-07-22: Arreglado el bug de la celda duplicada en Firefox.
v2008-04-23: Primera versión.

Lo más fresco

Sugerencias del chef

Lo más visitado

Menú del día

Seleccionar nodo

Ejemplos de uso

Demo

Fallos conocidos

Historial