$(document).ready(function($) { // trigger event cuando el boton es cliqueado $("button").click(function() { // añadir nueva fila usando la funcion addTableRow addTableRow($("table")); // prevenir que el boton redireccione a una nueva pagina return false; }); // funcion que añade una nueva fila a la tabla clonando la ultima fila e // incrementando los nombres y los ids en 1 para hacerlos unicos en el documento function addTableRow(table) { // clonar la ultima fila de la tabla var $tr = $(table).find("tbody tr:last").clone(); // obtener el atributo name para los inputs y selects $tr.find("input:text").val(""); $tr.find("input,select").attr("name", function() { // separar el campo name y su numero en dos partes var parts = this.id.match(/(\D+)(\d+)$/); // crear un nombre nuevo para el nuevo campo incrementando el numero para los previos campos en 1 return parts[1] + ++parts[2]; // repetir los atributos ids }).attr("id", function(){ var parts = this.id.match(/(\D+)(\d+)$/); return parts[1] + ++parts[2]; }); // añadir la nueva fila a la tabla $(table).find("tbody tr:last").after($tr); }; });
<form> <table> <thead> <tr> <th scope="col">Pista</th> <th scope="col">Album</th> <th scope="col">Artista</th> </tr> </thead> <tbody> <tr> <td><input id="pista1" name="pista1" /></td> <td><input id="album1" name="album1" /></td> <td><select id="artista1" name="artista1"> <option value="">Seleccionar</option> <option value="1">Artista 1</option> <option value="2">Artista 2</option> <option value="3">Artista 3</option> </select> </td> </tr> </tbody> </table> </form> <button>Add</button>