good afternoon, my program is a table that adds rows and when I press enter insert the data in it, my problem is that when I try to delete a row that has no data entered, it deletes the rows that already have the other data inserted , as an example:
I have the data in two rows already inserted in the table, but I accidentally open one more row and when I want to delete it, it deletes the other two rows that have the data already inserted in the table.
Please I need your help, this is my code:
$(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>
It simply adds the id to the array if it's selected, if it's already selected it removes the id, like so:
And when you call
eliminar()
, there is no need to pass the id_row_selected parameter since you declared it as a global variable below.The problem is in your array, every time you select one
input
it is added to your array again, here it is necessary to validate if it is added or not.For that I use
$.inArray('element',arreglo)
and in case a selected element is deleted I would use.splice(index,1)
, therefore the select function would add the following:but now there is another problem, and that is that the array is not emptied after deleting the selected element:
With these changes your problem is solved.