Administrar tabla con Jquery

Para llevar a cabo este ejemplo vamos a crear una tabla para administrar una lista de productos que tendrán un nombre, una descripción y precio del mismo. Podremos agregar los que queramos o eliminar uno en particular.

En primer lugar vamos a agregar el código html:

<!DOCTPYE html>
<html>
<head>
 <meta charset="UTF-8">
 <title> Administrar tabla con Jquery </title>
 <!-- Latest compiled and minified CSS --> 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div class="container"> 
       <h1> Lista de prodoctos </h1> 
       <form action="" method="post"> 
          <table id="lista_productos" class="table table-striped"> 
             <thead>
                <tr>
                   <th> Nombre </th>
                   <th> Descripción </th>
                   <th> Precio </th> 
                   <th>  </th> 
                </tr> 
             </thead> 
             <tbody> 
                <tr>
                   <td>
                      <input type="text" name="nombre[]" class="nombre" placeholder="Nombre" />
                   </td> 
                   <td> 
                      <textarea name="descripcion[]" class="descripcion" placeholder="Descripción" width="100%"></textarea> 
                   </td> 
                   <td> 
                      <input type="number" name="precio[]" class="precio" placeholder="Precio" />  
                   </td> 
                   <td>  
                      <button type="button" class="btn btn-danger button_eliminar_producto"> Eliminar </button>
                   </td> 
                </tr> 
             </tbody> 
             <tfoot> 
                <tr> 
                   <td colspan="3">  </td>
                   <td> 
                      <button type="button" class="btn btn-success button_agregar_producto"> Agregar </button> 
                   </td> 
               </tr> 
            </tfoot> 
        </table> 
    </form> 
 </div> 
 <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
 <script type="text/javascript" src="js/productos.js"></script> 
 <script type="text/javascript"> 
    $(document).ready(function(){
       productos(); 
    }); 
 </script>
</body>
</html>

Haciendo una explicación rápida, primero agregamos el css de Twitter Bootstrap:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

También agregamos la librería de Jquery, en ese caso en particular la 3.2.1:

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

Y un archivo .js para manipular el comportamiento de la tabla:

<script type="text/javascript" src="js/productos.js"></script>

Ahora sólo nos falta agregar el código de ese archivo ‘productos.js’:

function productos(){ 
   var tbody = $('#lista_productos tbody'); 
   var fila_contenido = tbody.find('tr').first().html();
   //Agregar fila nueva. 
   $('#lista_productos .button_agregar_producto').click(function(){ 
      var fila_nueva = $('<tr></tr>');
      fila_nueva.append(fila_contenido); 
      tbody.append(fila_nueva); 
   }); 
   //Eliminar fila. 
   $('#lista_productos').on('click', '.button_eliminar_producto', function(){
      $(this).parents('tr').eq(0).remove();
   });
}

Para entender un poco el código:

Primero recuperamos el elemento tbody dentro de su padre el cual tiene el id ‘lista_productos’:

var tbody = $(‘#lista_productos tbody’);

Luego el contenido la primer y única fila inicial, para hacer copias al momento de crear más:

var fila_contenido = tbody.find('tr').first().html();

Con el contenido de la fila, ya podemos crear nuevas filas:

$('#lista_productos .button_agregar_producto').click(function(){ 
   var fila_nueva = $('<tr></tr>');
   fila_nueva.append(fila_contenido); 
   tbody.append(fila_nueva); 
});

O eliminar una actual:

$('#lista_productos').on('click', '.button_eliminar_producto', function(){
   $(this).parents('tr').eq(0).remove();
});

Descargar ejemplo

Redes sociables

    Deja un comentario

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

    *