Soy nuevo en Javascript y estoy haciendo un programa donde en una tabla le puedas agregar filas, escribir sus datos y insertarlos en la tabla misma, lo que deseo que me haga es que cuando ingrese una fila no se ingrese otra fila:
Por ejemplo:
Doy click al botón de "agregar una fila", pero no he agregado ningún dato a esta y al dar click nuevamente en el botón "agregar una fila" me lo impida y me salga un alert que me indique que no se me agregara una fila si no lleno los campos requeridos (Nombre, Área, Puesto y Email)...
Este es mi código JavaScript:
$(document).ready(function() {
$('#bt_add').click(function() {
agregar();
});
$('#bt_del').click(function() {
eliminar(id_fila_selected);
});
$('#bt_delall').click(function() {
eliminarTodasFilas();
});
});
var cont = 0;
var id_fila_selected = [];
function agregar() {
cont++;
var fila =
'<tr class="selected" id="fila' + cont + '" onclick="seleccionar(this.id);"><td> </td>' +
'<td><input type="text" id="nombre"></td>' +
'<td><input type="text" id="area"></td>' +
'<td><input type="text" id="puesto"></td>' +
'<td><input type="text" id="email" onkeyup="addToTable(event)"></td></tr>';
$('#tabla').append(fila);
reordenar();
}
/*
* Esta función agrega lo ingresado a la tabla
*/
function addToTable(e) {
if (e.keyCode === 13) {
e.preventDefault();
const row = e.target.parentNode.parentNode;
const inputs = row.querySelectorAll('input');
const values = [].map.call(inputs, input => input.value);
const tds = row.querySelectorAll('td');
[].forEach.call(tds, (td, i) => {
if (i === 0) { td.textContent = i + 1; }
else { td.innerHTML = values[i - 1]; }
});
}
}
function seleccionar(id_fila) {
if ($('#' + id_fila).hasClass('seleccionada')) {
$('#' + id_fila).removeClass('seleccionada');
} else {
$('#' + id_fila).addClass('seleccionada');
}
//2702id_fila_selected=id_fila;
id_fila_selected.push(id_fila);
}
function eliminar(id_fila) {
/*$('#'+id_fila).remove();
reordenar();*/
for (var i = 0; i < id_fila.length; i++) {
$('#' + id_fila[i]).remove();
}
reordenar();
}
function reordenar() {
var num = 1;
$('#tabla tbody tr').each(function() {
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas() {
$('#tabla tbody tr').each(function() {
$(this).remove();
});
}