Tengo un problema con el mismo programa que genera, elimina y agrega filas dentro de una tabla, pero lo que quiero hacer es que cuando el usuario no ingrese uno o ningún dato dentro de la tabla me de un alert
que diga: "no ha ingresado nombre de la columna por favor ingréselo" y que también no agregue la fila con el campo vacío, lo único que si hace mi programa es que no agregue una fila de más cuando tiene uno ya abierto, espero que entiendan mi problema. les muestro mi código:
$(document).ready(function() {
$('#bt_add').click(function() {
var check = [];
$("#tabla").find('.selected').find('td').each(function(){
if($.trim($(this).text()) === "")
check.push($(this).attr('id'));
});
if(check.length === 0)
agregar();
else
alert('No puedo agregar mas de una fila, por favor llene los campos');;
});
$('#bt_del').click(function() {
eliminar();
});
$('#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();
}
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]; }
});
reordenar()
}
}
function seleccionar(id_fila) {
if ($('#' + id_fila).hasClass('seleccionada')) {
$('#' + id_fila).removeClass('seleccionada');
// borrar también el id del array de filas seleccionadas
var existe_el_id = id_fila_selected.indexOf(id_fila);
id_fila_selected.splice(existe_el_id, 1);
} else {
$('#' + id_fila).addClass('seleccionada');
// agregar id sólo si se hizo click
id_fila_selected.push(id_fila);
}
}
function eliminar() {
for (var i = 0; i < id_fila_selected.length; i++) {
$('#' + id_fila_selected[i]).remove();
}
reordenar();
}
function reordenar() {
var num = 1;
$('#tabla tbody tr').each(function() {
$(this).find('td').eq(0).text(num);
num++;
});
}
function eliminarTodasFilas() {
$('#tabla tr.selected').each(function() {
$(this).remove();
});
}
$(function () {
$("table").on("dblclick", "td",function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
#content {
position: absolute;
min-height: 50%;
width: 80%;
top: 20%;
left: 5%;
}
.selected {
cursor: pointer;
}
.selected:hover {
background-color: #0585C0;
}
.seleccionada {
background-color: #0585C0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<label> Tabla de Ejemplo </label>
<br>
<div align="center" style="width:416px;" >
<button id="bt_add" class="btn btn-primary">Agregar</button>
<button id="bt_del" class="btn btn-primary">Eliminar</button>
<button id="bt_delall" class="btn btn-primary">Eliminar todo</button>
</div>
<table id="tabla" style= "position:absolute;top:150px;left:75px" class="table table-bordered">
<thead>
<thead>
<tr>
<th>Nº</th>
<th>NOMBRE</th>
<th>AREA</th>
<th>PUESTO</th>
<th>EMAIL</th>
</tr>
</thead>
</table>
</div>