Foros del Web » Programando para Internet » Javascript »

Crear tabla html editable con javascript

Estas en el tema de Crear tabla html editable con javascript en el foro de Javascript en Foros del Web. Saludos a todos!!! quisiera hacer que una tabla la cual tiene una serie de datos al pinchar sobre las celdas o sobre un checkbox se ...
  #1 (permalink)  
Antiguo 17/06/2011, 14:44
Avatar de veriyo  
Fecha de Ingreso: junio-2010
Mensajes: 80
Antigüedad: 12 años
Puntos: 0
Crear tabla html editable con javascript

Saludos a todos!!! quisiera hacer que una tabla la cual tiene una serie de datos al pinchar sobre las celdas o sobre un checkbox se pueda modificar su contenido, encontre este codigo por aqui (pero no lo llego a entender del todo ) lo que quiero es que se puedan modificar todos los datos.... menos los nombres; dejo el codigo

Código HTML:
<html>
<head>
<script type="text/javascript">
function modifica() {
  tab=document.getElementById('tabla');
  for (i=0; ele=tab.getElementsByTagName('input')[i]; i++) {
    if (ele.checked) edita(ele);
    ele.checked = false;
  }
}
function edita(obj) {
  padre = obj.parentNode.parentNode;
  celda = padre.getElementsByTagName('td')[2];
  txt = celda.innerHTML;
  celda.innerHTML = '';
  inp = celda.appendChild(document.createElement('input'));
  inp.value=txt;
  inp.onblur = function() { this.parentNode.innerHTML = this.value  }
}
</script>
</head>
<body>
<table id="tabla">
<tr>
<td width="24"><input type="checkbox" /></td><td width="35">Pepe</td><td width="27">69</td>
<td width="31">34</td>
<td width="27">22</td>
<td width="37">44</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Paco</td><td>172</td>
<td>34r</td>
<td>67</td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Tere</td><td>12</td>
<td>88</td>
<td>455</td>
<td>678</td>
</tr>
</table>
<input type="button" value="Modificar" onClick="modifica()" />
</body>
</html> 
gracias al que pueda aportar alguna idea!!!
  #2 (permalink)  
Antiguo 17/06/2011, 16:32
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 11 años, 3 meses
Puntos: 192
Respuesta: Crear tabla html editable con javascript

Podríamos modificar un poco la función edita() para que tome todo un rango de celdas y no sólo una:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function modifica() {
  3.   tab=document.getElementById('tabla');
  4.   for (i=0; ele=tab.getElementsByTagName('input')[i]; i++) {
  5.     if (ele.checked) edita(ele);
  6.     ele.checked = false;
  7.   }
  8. }
  9. function edita(obj) {
  10.   padre = obj.parentNode.parentNode;
  11.   celda = padre.getElementsByTagName('td');
  12.   inicio = 2;//celda para comenzar
  13.   fin = 6;//celda para terminar
  14.  
  15.   for(i=inicio;i<fin;i++){
  16.   var celdaTmp = celda[i];
  17.    
  18.   txt = celdaTmp.innerHTML;
  19.   celdaTmp.innerHTML = '';
  20.   inp = celdaTmp.appendChild(document.createElement('input'));
  21.   inp.value=txt;
  22.   inp.onblur = function() { this.parentNode.innerHTML = this.value  }
  23.    
  24.      
  25.   }
  26. }
  27. </script>

Tal vez es un poco molesto cómo se cierran cuando pierden foco (aunque a mi me resulta divertido) pero se puede solucionar con una estilización unificando dimensiones de celdas y de los inputs.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 18/06/2011, 05:55
Avatar de veriyo  
Fecha de Ingreso: junio-2010
Mensajes: 80
Antigüedad: 12 años
Puntos: 0
Respuesta: Crear tabla html editable con javascript

muchas gracias!!! es justamente lo que necesitaba, ahora tengo otra duda como podria darle estilo a la caja de texto para que no sea tan ancha?? y asi ponerle a todas le mismo ancho..... muuuchas gracias de nuevo
  #4 (permalink)  
Antiguo 18/06/2011, 06:38
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 11 años, 3 meses
Puntos: 192
Respuesta: Crear tabla html editable con javascript

Es lo que te decía, tenés que unificar los anchos para que no sea tan molesto. Podrías hacer algo así en CSS:

Código CSS:
Ver original
  1. table input {width:100%;}

Eso es válido porque tus <td> tienen un ancho especificado como atributo. Sería mejor si todas las dimensiones y estilos las controlás con CSS.
__________________
nahueljose.com.ar
  #5 (permalink)  
Antiguo 21/06/2011, 09:02
Avatar de veriyo  
Fecha de Ingreso: junio-2010
Mensajes: 80
Antigüedad: 12 años
Puntos: 0
Respuesta: Crear tabla html editable con javascript

tengo una duda que me esta volviendo loca!!! al darle dos veces a modificar el imput me sale con el texto de la etiqueta <input> y no se como quitarlo quisiera que no aparezca texto solo la casilla de texto..... de nuevo muchas gracias por tu ayuda!!!
  #6 (permalink)  
Antiguo 21/06/2011, 10:00
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 11 años, 3 meses
Puntos: 192
Respuesta: Crear tabla html editable con javascript

Y podrías desactivar el botón de modificar cuando se está editando y re-activarlo cuando se termine.
__________________
nahueljose.com.ar

Etiquetas: editable, html, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:51.