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();
});