Buenos días. Estoy haciendo una tabla en donde se agregan filas y estas se pueda editar. Tenía un problema anterior el cual consistía en que solo editaba el encabezado, ya arregle ese problema pero se generó otro: solo me edita la primera fila pero la segunda fila y posteriores no las edita. No se por qué ocurre este problema; les muestro mi programa para que me puedan entender mejor:
$(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" placeholder="Ingresar nombre"></td>' +
'<td><input type="text" id="area" placeholder="Ingresar area"></td>' +
'<td><input type="text" id="puesto" placeholder="Ingresar puesto"></td>' +
'<td><input type="text" id="email" placeholder="Ingresar 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');
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() {
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 () {
$("td").on("dblclick",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>
<body>
<div id="content">
<h1> Tabla de Ejemplo </h1>
<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 style="background-color:powderblue;">
<tr>
<th >Nº</th>
<th>NOMBRE</th>
<th>AREA</th>
<th>PUESTO</th>
<th>EMAIL</th>
</tr>
<tr id=fila'+cont+' onclick="seleccionar(this.id);"><td> </td>
<td><input type="text" id="nombre" placeholder="Ingresar nombre"></td>
<td><input type="text" id="area" placeholder="Ingresar area"></td>
<td><input type="text" id="puesto" placeholder="Ingresar puesto"></td>
<td><input type="text" id="email" placeholder="Ingresar email" onkeyup="addToTable(event)"></td></tr>
</thead>
</table>
</div>
</body>