buenas tardes, mi programa se trata de una tabla que agrega filas y al dar enter insertar los datos en la misma, mi problema es que cuando trato de borrar una fila que no tiene ningún dato ingresado borra las filas que ya tienen insertada los demás datos, como un ejemplo:
Tengo en dos filas ya insertadas en la tabla los datos, pero abro por accidente una fila de mas y al querer borrarla borra las otras dos fila que tiene los datos ya insertados en la tabla.
Por favor necesito de su ayuda,Este es mi código:
$(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();
});
}
#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://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div id="content">
<label> Tabla de Ejemplo </label>
<br>
<button id="bt_add" class="btn btn-default">Agregar</button>
<button id="bt_del" class="btn btn-default">Eliminar</button>
<button id="bt_delall" class="btn btn-default">Eliminar todo</button>
<table id="tabla" class="table table-bordered">
<thead>
<tr>
<td>Nº</td>
<td>NOMBRE</td>
<td>AREA</td>
<td>PUESTO</td>
<td>EMAIL</td>
</tr>
</thead>
</table>
</div>