Hello.
I have this jquery code:
$(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('Registre los Datos de la Fila ');;
});
$('#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");
});
});
});
The problem here is that when the user deletes a row I get an alert that says: "I delete the row number of the row of the column Name of the column ", But I enter the following:
$('#bt_del').click(function() {
alert('Elimino la fila'+ cont );
eliminar();
});
Which doesn't tell me which row to delete, rather it tells me how many times I'm deleting a row.
Finally, the fields of the columns are: Nº, NAME, AREA, POSITION, EMAIL, I hope you understand me, even so I show you my HTML code and I hope you can help me:
<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>
<td>Nº</td>
<td>NOMBRE</td>
<td>AREA</td>
<td>PUESTO</td>
<td>EMAIL</td>
</tr>
</thead>
</table>
</div>
All you have to do is iterate through the selected rows:
The method
Array#join
allows you to join an array by means of a delimiter (optional, by default a comma is added). In this way, what you will get will be all the selected rows separated by commas within a string.Your delete function would not be changed, you just need to empty the array containing the ids of the selected rows:
Since in
id_fila_selected
you have all the rows that will be deleted (because the user selected them), you have to take advantage of that variable to show it in an alert.Since you already have the data in that array, you can make it display with a loop:
In this case we add a comma, because there can be several, according to how your code is structured.
I don't know if you have it somewhere else in your code, but remember that you would have to flush the array
id_fila_selected
once you're done deleting the rows.I hope it helps you, greetings.
PS I don't know if
ToString()
it is necessary, you can try with or without it, it's just that right now I can't test it.Apart from id_row_selected = []; also added: