Estoy intentando editar los datos de uuna tabla con javascript pero al momento de dar en guardar estos datos se sobrescriben sobre la ultima fila y me borra todo lo demás
Estoy usando este codigo de javascript para poder editar los datos en la tabla puedo transformar los td en inputs para poder editarlos pero al guardar me viene el error ya que me borra todo lo demas y no me edita solo la fila tengo entendido que html no me sirve pero no he encontrado nada que me ayude a resolver este problema
<script>
var editando = false;
function transformarEnEditable(nodo) {
if (editando == false) {
var nodoTd = nodo.parentNode; //Nodo TD
var nodoTr = nodoTd.parentNode; //Nodo TR
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
var nodosEnTr = nodoTr.getElementsByTagName('td');
var Nombre = nodosEnTr[0].textContent;
var Unidad = nodosEnTr[1].textContent;
var Precio = nodosEnTr[2].textContent;
var Cantidad = nodosEnTr[3].textContent;
var Descuento = nodosEnTr[4].textContent;
var Observacion = nodosEnTr[5].textContent;
var nuevoCodigoHtml = '<td><input type="text" name="Nombre" id="Nombre" value="' + Nombre + '" size="15" readonly/></td>' +
'<td><input type="text" name="Unidad" id="Unidad" value="' + Unidad + '" size="5" readonly/></td>' +
'<td><input type="text" name="Precio" id="Precio" value="' + Precio + '" size="5" readonly/></td>' +
'<td><input type="text" name="Cantidad" id="Cantidad" value="' + Cantidad + '" size="5"/></td>' +
'<td><input type="text" name="Descuento" id="Descuento" value="' + Descuento + '" size="5"/></td>' +
'<td><input type="text" name="Observacion" id="Observacion" value="' + Observacion + '" size="50"/></td> <td>En edición</td>';
nodoTr.innerHTML = nuevoCodigoHtml;
nodoContenedorForm.innerHTML = 'Pulse Aceptar para guardar los cambios o cancelar para anularlos' +
'<form name = "formulario" method="post" >' +
'<input class="btn btn-info text-center" type="button" value="Aceptar" onclick="capturarEnvio()"> <input class="btn btn-info text-center" type="reset" value="Cancelar" onreset="anular()">';
editando = "true";
}
else {
alert('Solo se puede editar una línea. Recargue la página para poder editar otra');
}
}
function capturarEnvio() {
var nodoContenedorForm = document.getElementById('contenedorForm'); //Nodo DIV
var id = $("#txtId").val();
var Nomb = Nombre.value;
var Unid = Unidad.value;
var Prec = Precio.value;
var Desc = Descuento.value;
var Cant = Cantidad.value;
var Obs = Observacion.value;
var nuevoProducto = '<tr class="c-table__row" id="trDato">' +
'<td class="c-table__cell tdNombre"> ' + Nomb + '</td > ' +
'<td class="c-table__cell tdUnidad"> ' + Unid + '</td > ' +
'<td class="c-table__cell tdPrecio"> ' + Prec + '</td > ' +
'<td class="c-table__cell tdCantidad"> ' + Cant + '</td > ' +
'<td class="c-table__cell tdDescuento"> ' + Desc + '</td > ' +
'<td class="c-table__cell tdObservacion"> ' + Obs + '</td > ' +
'<td><button class="btn btn-default btnEliminar" data-toggle="tooltip" data-placement="top" title="Eliminar"><i class="fas fa-trash"></i></button></td>' +
'</tr>';
nodoContenedorForm.HTML = "";
$("#tableResultContent").innerHTML(nuevoProducto);
}
function anular() {
window.location.reload();
}
</script>