Código de JavaScript - Modificar el contenido de una tabla con doble click

Imágen de perfil
Val: 606
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Modificar el contenido de una tabla con doble clickgráfica de visualizaciones


JavaScript

Publicado el 24 de Abril del 2019 por Info (100 códigos)
2.528 visualizaciones desde el 24 de Abril del 2019
Este código muestra como haciendo doble click sobre una celda de una tabla, nos aparecerá un input para modificar el contenido de la misma.
Perdiendo el foco o pulsando la tecla Enter, desaparece el input y se muestra el valor modificando dentro de la tabla.

modificar-contenido-tabla

1
estrellaestrellaestrellaestrellaestrella(2)

Publicado el 24 de Abril del 2019gráfica de visualizaciones de la versión: 1
2.529 visualizaciones desde el 24 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
 
    <style>
    table {border:1px solid #ccc;padding:10px;}
    table tr:nth-child(even) {background:#ccc;}
    table td {padding:5px;}
    </style>
</head>
 
<body>
    <h1>haz doble clic sobre la celda a modificar</h1>
    <p>
        <table>
            <tr>
                <th>id</th><th>Nombre</th><th>Apellidos</th><th>Género</th><th>Edad</th>
            </tr>
            <tr>
                <td>1</td><td>Juan</td><td>Perez</td><td>M</td><td>30</td>
            </tr>
            <tr>
                <td>2</td><td>Jose</td><td>Vazquez</td><td>M</td><td>31</td>
            </tr>
            <tr>
                <td>3</td><td>Luis</td><td>Astorga</td><td>M</td><td>25</td>
            </tr>
            <tr>
                <td>4</td><td>Luisa</td><td>Valdes</td><td>F</td><td>56</td>
            </tr>
        </table>
    </p>
</body>
</html>
 
<script>
// creamos un evento doble click para cada una de las celdas de la tabla
const tds=document.querySelectorAll("td");
for(td of tds) {
    td.addEventListener("dblclick",function() {
 
        // creamos un nuevo input con el valor actual de la celda
        let input=document.createElement('input');
        input.value=this.textContent;
 
        // evento que se ejecuta cuando el input pierde el foco
        input.addEventListener("blur",function() {
            removeInput(this);
        });
 
        // evento que se ejecuta cada vez que se deja de pulsar una tecla
        input.addEventListener("keydown",function(e) {
 
            // la tecla 13, es el Enter
            if(e.which==13) {
                removeInput(this);
            }
        });
 
        // quitamos el contenido de la celda de la tabla
        this.textContent="";
 
        // Ponemos en la celda el input que hemos creado
        this.appendChild(input);
    });
}
 
// Eliminamos el input y ponemos el valor del mismo
function removeInput(e) {
    e.parentElement.textContent=e.value;
}
</script>



Comentarios sobre la versión: 1 (2)

Imágen de perfil
26 de Abril del 2019
estrellaestrellaestrellaestrellaestrella
Muy útil; adaptable, etc...

Un saludo
Responder
Michell
15 de Octubre del 2020
estrellaestrellaestrellaestrellaestrella
Como seria para modificar el contenido de la fila completa de una tabla en html?
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5271