Crear tabla html editable con javascript

veriyo · #1 (**permalink**) 17/06/2011, 14:44

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!!!

Naahuel · #2 (**permalink**) 17/06/2011, 16:32

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<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');
  inicio = 2;//celda para comenzar
  fin = 6;//celda para terminar
  
  for(i=inicio;i<fin;i++){
  var celdaTmp = celda[i];
    
  txt = celdaTmp.innerHTML;
  celdaTmp.innerHTML = '';
  inp = celdaTmp.appendChild(document.createElement('input'));
  inp.value=txt;
  inp.onblur = function() { this.parentNode.innerHTML = this.value  }
    
      
  }
}
</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.

veriyo · #3 (**permalink**) 18/06/2011, 05:55

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

Naahuel · #4 (**permalink**) 18/06/2011, 06:38

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 originaltable 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.

veriyo · #5 (**permalink**) 21/06/2011, 09:02

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!!!

Naahuel · #6 (**permalink**) 21/06/2011, 10:00

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