Previously I've been doing a table with Jquery, in which I have complicated, in my code, I want to delete or add a row, tell me the number of the row that made this function (add or remove), for that the delete function already tells me, since they showed me that firstElementChild tells you which row or rows were deleted. But with my add function I have not left, I show you my 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('No puedo agregar mas de una fila, por favor llene los campos');;
});
$('#bt_del').click(function() {
eliminar();
});
$('#bt_delall').click(function() {
eliminarTodasFilas();
alert('Elimino todas las filas');
});
reordenar();
});
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();
if($("#nombre").val() == ""){
alert("Ingrese el nombre del usuario");
return false;
}else if($("#area").val() == ""){
alert("Ingrese el nombre de la area");
return false;
}else if($("#puesto").val() == ""){
alert("Ingrese el nombre del puesto");
return false;
}else if($("#email").val() == ""){
alert("Ingrese su correo electronico");
return false;
}
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();
id_fila_selected=[];
}
}
function seleccionar(id_fila) {
if ($('#' + id_fila).hasClass('seleccionada')) {
$('#' + id_fila).removeClass('seleccionada');
var existe_el_id = id_fila_selected.indexOf(id_fila);
id_fila_selected.splice(existe_el_id, 1);
} else {
$('#' + id_fila).addClass('seleccionada');
id_fila_selected.push(id_fila);
}
}
function eliminar() {
const ids = id_fila_selected.join();
var dels = 0;
var idfilas ="";
for (var i = 0; i < id_fila_selected.length; i++) {
idfilas += document.getElementById(id_fila_selected[i]).firstElementChild.textContent + "...";
$('#' + id_fila_selected[i]).remove();
dels++;
}
if (dels==1)
alert('Se ha eliminado la fila' + idfilas);
else
alert('Se han eliminado las filas' + idfilas);
reordenar();
id_fila_selected=[];
}
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: #EBF5FB;
}
.seleccionada{
background-color: #81D4FA;
}
table thead {
background-color: #7FB3D5;
}<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>
<tr>
<th>Nº</th>
<th>NOMBRE</th>
<th>AREA</th>
<th>PUESTO</th>
<th>EMAIL</th>
</tr>
</thead>
</table>
</div>
</body>Could you help me?