Crear celdas en tabla HTML con JavaScript

Funciones JAVASCRIPT

Sean bienvenidos a una nueva entrada de la sección de JavaScript, en esta ocasión veremos como crear celdas de una tabla de manera dinámica, acción que desencadenaremos mediante un botón, esta operación es de bastante utilidad cuando deseamos ampliar las posibilidades de ingreso de información en un formulario por parte del usuario, veamos:

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
< !DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Crear celdas tabla HMTL con JavaScript</title>
</head>
<body>
    <table id="tabla" border="0">
        <tbody>
            <tr>
                <td>
                    <input value="" style="height: 20px; width: 100px;" id="urlresp" type="text" onFocus="Limpiar(this)"/>
                    <input value="" style="height: 20px; width: 30px;" class="ptss" type="text" onFocus="Limpiar(this)"/>
                   
                </td>
        </tr></tbody>
    </table>
    <table id="nuevat" border="0">
    </table>
    <button onclick="Nuevo()" value="Crear">Crear</button>
    <script>
        function Limpiar(control) {
            control.value = '';
        }
        var orden = 1;
        function Nuevo() {
            var id = document.getElementById("tabla");
            var nuevos = id.cloneNode(true);
            nuevos.style.id = 'enlaces' + orden;
            orden++;
            id = document.getElementById("nuevat");
            id.appendChild(nuevos);
        }
    </script>
</body>
</html>

Mirando el resultado de la ejecución de este ejemplo al pulsar el botón Crear se añaden 2 nuevos campos en nuestra tabla:
crear tabla html

¡Suscríbete a mi canal, para acceder a más contenidos gratuitos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *