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

Imágen de perfil
Val: 239
Bronce
Ha disminuido 1 puesto 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

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 24 de Abril del 2019 por info
1.094 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(1)

Publicado el 24 de Abril del 2019gráfica de visualizaciones de la versión: 1
1.095 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 (1)

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

Un saludo
Responder

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s5271