borrame.com - Colección particular de recortes de código y documentación para programación web

Canales RSS

Lo más fresco

  1. Bookmarklets Nuevo
  2. Recetario básico para CakePHP/2 Nuevo
  3. Certificado auto-firmado Nuevo

Sugerencias del chef

Lo más visitado

  1. Fecha y hora
  2. Dar formato a un número
  3. Reiniciar secuencia
  4. Vaciar un esquema
  5. Certificado auto-firmado
Compartir esta página

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 * * @param {Node} nodo Elemento de la página * @version 2013-11-27 */ function seleccionarNodo(nodo){     var rango, seleccion;     // Creamos un rango y le asignamos el nodo     if(document.createRange){ // W3C         rango = document.createRange();         rango.selectNode(nodo);     }else if(document.body.createTextRange){ // IE<9         rango = document.body.createTextRange();         rango.moveToElementText(nodo);     }else{         return;     }     // Seleccionamos el rango     if(window.getSelection){ // W3C         seleccion = window.getSelection();         seleccion.removeAllRanges(); // Eliminar selección actual         seleccion.addRange(rango);     }else if(rango.moveToElementText){ // IE<9         rango.select();     } }

El código es compatible con Firefox 2+, Internet Explorer 6+ y Google Chrome.

En Opera no ha funcionado correctamente hasta bien entrada la vesión 12 (verificado en 12.11). Pero imagino que da igual porque a partir de la 13 se han pasado a Webkit.

En Konqueror 3 no parecía funcionar allá por 2008. Supongo que lo habrán arreglado pero ahora mismo no tengo con qué probarlo.

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
97,8678,8386,99157,66116,8943,4995,1446,21
160,38206,59152,22263,6754,3767,9665,24165,82
228,3462,5286,99263,67233,77241,93111,45212,03
255,5246,21179,41133,20266,39260,96146,79231,05
203,87244,65252,8051,65231,0548,93266,3973,39

O dale con salero al botón:

Historial

v2013-11-27
Código más compacto. Detectar funcionalidades en lugar de capturar excepciones.
Documentar en formato jsdoc.
v2009-07-22
Arreglado el bug de la celda duplicada en Firefox.
v2008-04-23
Primera versión.

Esta página ha sido impresa el sábado 23 de septiembre de 2017 (02:23:14 +0200) desde http://borrame.com/recortes/javascript/seleccionar-nodo.html. La última vez que miré contenía HTML válido con CSS fresquito y si tiene flatas de ortografía ha sido sin querer.

borrame.com es el sitio anteriormente conocido como bits.demogracia.com (no confundir con Demogracia, que sólo pasaba por ahí).

© 2005-2017 by Álvaro González (alvaro.es) • Burgos (España) • borrame.com