Código de JQuery - Añadir y eliminar filas de una tabla con jquery

Imágen de perfil

Añadir y eliminar filas de una tabla con jquerygráfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 22 de Enero del 2013 por Xavi
65.386 visualizaciones desde el 22 de Enero del 2013. Una media de 329 por semana
Código que muestra como añadir y eliminar filas de una tabla dada. Crea tantas columnas como la tabla tenga inicialmente.

Versión 1
estrellaestrellaestrellaestrellaestrella(5)

Publicado el 22 de Enero del 2013gráfica de visualizaciones de la versión: Versión 1
65.388 visualizaciones desde el 22 de Enero del 2013. Una media de 329 por semana
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
<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        /**
         * Funcion para añadir una nueva columna en la tabla
         */
        $("#add").click(function(){
            // Obtenemos el numero de filas (td) que tiene la primera columna
            // (tr) del id "tabla"
            var tds=$("#tabla tr:first td").length;
            // Obtenemos el total de columnas (tr) del id "tabla"
            var trs=$("#tabla tr").length;
            var nuevaFila="<tr>";
            for(var i=0;i<tds;i++){
                // añadimos las columnas
                nuevaFila+="<td>columna "+(i+1)+" Añadida con jquery</td>";
            }
            // Añadimos una columna con el numero total de columnas.
            // Añadimos uno al total, ya que cuando cargamos los valores para la
            // columna, todavia no esta añadida
            nuevaFila+="<td>"+(trs+1)+" columnas";
            nuevaFila+="</tr>";
            $("#tabla").append(nuevaFila);
        });
 
        /**
         * Funcion para eliminar la ultima columna de la tabla.
         * Si unicamente queda una columna, esta no sera eliminada
         */
        $("#del").click(function(){
            // Obtenemos el total de columnas (tr) del id "tabla"
            var trs=$("#tabla tr").length;
            if(trs>1)
            {
                // Eliminamos la ultima columna
                $("#tabla tr:last").remove();
            }
        });
    });
    </script>
 
    <style>
    #add, #del  {cursor:pointer;text-decoration:underline;color:#00f;}
    </style>
</head>
 
<body>
<div id="add">pulsa aquí para añadir una nueva fila desde jquery</div>
<div id="del">pulsa aquí para eliminar la ultima fila desde jquery</div>
<p>
    <table id="tabla" border=1>
        <tr>
            <td>primera columma</td>
            <td>segundo columna</td>
            <!-- podemos añadir tantas columnas como deseemos -->
            <!--<td>tercera columna</td>-->
        </tr>
    </table>
</p>
</body>
</html>



Comentarios sobre la versión: Versión 1 (5)

Giiber
30 de Junio del 2014
estrellaestrellaestrellaestrellaestrella
Hola que tal, vi tu codigo. ME pregunto como harias para que agregara columnas y filas??? osea que agregue hacia abajo como para la derecha...
Responder
ererer
07 de Mayo del 2015
estrellaestrellaestrellaestrellaestrella
rerere
Responder
Sebastian
24 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
Gracias Xavi

Pero como puedo guardar esa información en una base de datos.

Con un solo boton se me agrege todas laa filas que tenga en la tabla???

Gracias
Responder
MARTIN JOSE CARTAYA
08 de Julio del 2016
estrellaestrellaestrellaestrellaestrella
Exelente te felicito por el aporte
Responder
Jose MN
07 de Noviembre del 2016
estrellaestrellaestrellaestrellaestrella
Muy buen aporte, me sirvió de mucho, gracias!!!
Responder

Comentar la versión: Versión 1

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

http://lwp-l.com/s2279