Columna editable de una tabla

dominguez · #1 (**permalink**) 07/06/2006, 10:24

Hola,

Tengo una tabla en la que se muestra una información. En la primera columna hay un checkbox, en la segunda un nombre y en la tercera un valor entero. Cuando se marque el checkbox y se pulse el botón "Modificar" el valor entero tiene que ser editable para poder modificarse.

Creo que se podría hacer con Javascript pero no lo veo del todo claro. Alguién tiene una idea de cómo podría ser.

Gracias.

caricatos · #2 (**permalink**) 07/06/2006, 10:30

Hola:

Que esté en una tabla no tiene importancia...

Con el número en un input readonly, al pulsar el checkbox puedes cambiar ese atributo

<input type="checkbox" onclick="numero.readOnly = !this.checked" />

el número estarás más o menos así:
<input type="text" name="numero" value="0" />

Saludos

dominguez · #3 (**permalink**) 07/06/2006, 11:31

El problema está en que ese checkbox se genera automáticamente y, en principio, no puedo tocarlo.

Luego, ese valor entero si no es editable habría que mostrarlo dentro de un LABEL y si es editable en un INPUT.

Gracias por el interés.

JavierB · #4 (**permalink**) 07/06/2006, 11:37

Hola dominguez

Hay una cosa que no me queda clara. Tienes varias filas y en cada fila hay un checkbox, pero al pulsar el botón Modificar ¿necesitas editar varias filas a la vez o solo una?

Saludos,

dominguez · #5 (**permalink**) 07/06/2006, 11:53

Se pueden modificar varias filas a la vez. Si se marcan 5 checkbox y pulsamos el botón "Modificar" tienen que aparecer los 5 valores enteros como editables.

Saludos.

dominguez · #6 (**permalink**) 08/06/2006, 01:26

¿Tiene solución con Javascript?

JavierB · #7 (**permalink**) 08/06/2006, 09:09

Hola de nuevo.

Con este código se crea un cuadro de texto en la celda que se quiere editar y cuando, después de editar el valor, se pulsa fuera del cuadro se modifica la tabla. Espero que te sirva:

Código PHP:

  <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><input type="checkbox" /></td><td>Pepe</td><td>69</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Paco</td><td>172</td>
</tr>
<tr>
<td><input type="checkbox" /></td><td>Tere</td><td>12</td>
</tr>
</table>
<input type="button" value="Modificar" onclick="modifica()" />
</body>
</html>

Saludos,

soonye · #8 (**permalink**) 08/06/2006, 11:26

ola javierb este script me parecio fascinante no se si puedes decir donde encuentro informacion sobre estos metodos javascript como:
getElementsByTagName
obj.parentNode.parentNode;
y todas esas cositas agradecere una respuesta

dominguez · #9 (**permalink**) 09/06/2006, 12:43

Sí, me sirve.

Gracias por vuestro tiempo y ayuda.

Saludos.