Skip to content

Instantly share code, notes, and snippets.

@jsanbae

jsanbae/duplicate-table-grid-form.html

Last active November 26, 2021 13:57
Show Gist options
  • Save jsanbae/de3552a9c28eed15782b132e122bcce0 to your computer and use it in GitHub Desktop.
Save jsanbae/de3552a9c28eed15782b132e122bcce0 to your computer and use it in GitHub Desktop.
Download ZIP
agregar y quitar filas dinamicamente a una tabla con inputs (ideal para datagrids)
Raw
duplicate-table-grid-form.html
<html>
<body>
<!-- btn requiere la clase 'js-duplicate-line' y atributo 'data-table-id' con el id de la tabla al cual duplicará sus filas -->
<a class="js-duplicate-line" data-table-id="t-contactos" role="button">+ Nueva linea</a>
<!-- table layout-->
<table class="table" id="t-contactos">
<thead>
<tr>
<th>#</th>
<th>Nombre *</th>
<th>Area *</th>
<th></th><!-- disponible para btn eliminar -->
</tr>
</thead>
<tbody>
<tr data-line="1">
<td class="text-muted">1</td>
<td>
<input type="text" name="persona[]" required="true" placeholder="Nombre de la persona..." />
</td>
<td>
<select name="area[]" required="true">
<option value="">Seleccione un area...</option>
<option value="a1">Area 1</option>
<option value="a2">Area 2</option>
</select>
</td>
<td></td><!-- disponible para btn eliminar -->
</tr>
</tbody>
</table>
<script>
/**
* Agrega lineas a la tabla
*
*/
const dupBtns = document.querySelectorAll( ".js-duplicate-line" ).forEach((dupBtn) => {
dupBtn.addEventListener("click", (event) => {
event.preventDefault();
const table_id = dupBtn.dataset.tableId;
let tBody = document.querySelector("#" + table_id +" tbody");
let trLast = tBody.querySelector("tr:last-child");
let prevline = parseInt(trLast.dataset.line);
let trNew = trLast.cloneNode(true);
let line = prevline + 1;
trNew.dataset.line = line;
trNew.querySelectorAll('td').forEach( ( col, index ) => {
if (index == 0) { // primera columna que lleva en numero de linea
col.innerHTML = line;
}
// reset campos fila clonada
col.querySelectorAll('input, select').forEach(( inpt, index ) => {
if (inpt.tagName === 'select') {
inpt.options[0].selected = 'selected';
}
if (inpt.tagName === 'textarea') {
inpt.value = '';
}
if (inpt.tagName === 'input') {
inpt.value = '';
if (inpt.getAttribute('type') !== 'date') {// en caso de determinar valores especificos segun tipo de input
inpt.value = '';
}
}
});
});
// agrega boton eliminar a última columna
trNew.querySelector("td:last-child").innerHTML = '<a class="btn btn-sm btn-outline-danger" role="button" onclick="this.closest(\'tr\').remove();" title="Quitar linea">Quitar</a>';
// agrega nueva linea a la tabla
tBody.append(trNew);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment