Mostrar tabla con registros insertados

leoalvis · #1 (**permalink**) 29/08/2016, 10:12

Buenos días amigos:

Estoy intentando guardando unos registros sencillos en un arreglo y quiero que cuando pulse el boton "Insertar" me muestre en la parte inferior una tabla con los registros a medida que se van insertando... Al parecer mi lógica esta fallando en la función "mostrarTabla" pero no se que mas hacerle... Adjunto lo que he hecho hasta ahora, agradezco la ayuda:

<!DOCTYPE html>

<html>
<head>
<title></title>
<script>

window.onload=function(){

var persona = new Array();

document.getElementById("btnInsertar").addEventLis tener("click",insertar);
//document.getElementById("btnMostrar").addEventList ener("click",mostrarArray);

function insertar(){

var codigo=document.getElementById("txtCod").value;

var nombre=document.getElementById("txtNom").value;

var nota=parseFloat(document.getElementById("txtNota") .value);

persona.push({ 'codigo': codigo, 'nombre': nombre});
document.getElementById("txtCod").value="";
document.getElementById("txtNom").value="";
document.getElementById("txtNota").value="";

mostrarTabla();

}

function mostrarTabla(){

var tabla=document.createElement("table");
var fila;
var celda;
for(var i=0;i<persona.length;i++){

var fila=document.createElement("tr");

for (var j=0;persona[i].length;j++){

var celda=document.createElement("td");

var codi=document.createTextNode(document.getElementsB yTagName("td")[j].innerHTML=persona[j].codigo);
var nom=document.createTextNode(document.getElementsBy TagName("td")[j].innerHTML=persona[j].nombre);
var not=document.createTextNode(document.getElementsBy TagName("td")[j].innerHTML=persona[j].nombre);

var codigo=fila.appendChild(celda.appendChild(codi));
var nombre=fila.appendChild(celda.appendChild(nom));
var nota=fila.appendChild(celda.appendChild(not));

}

}

tabla.appendChild(fila);

document.body.appendChild(tabla);

}

}

</script>
</head>
<body>

<h1>Persona</h1><br>

<label>Codigo</label><br>
<input type="text" id="txtCod"><br>
<label>Nombre</label><br>
<input type="text" id="txtNom"><br><br>
<label>Nota</label><br>
<input type="text" id="txtNota"><br><br>
<input type="button" id="btnInsertar" value="Insertar">

</body>
</html>

IsaBelM · #2 (**permalink**) 30/08/2016, 14:18

prueba así

Cita:

<!DOCTYPE html>

<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', function(){

var tabla=document.createElement("table");

document.querySelector("form").addEventListener("s ubmit",function(event) {

var fila=document.createElement("tr");

Array.prototype.forEach.call(this.querySelectorAll ('input[type="text"]'), function(v, i) {

var celda=document.createElement("td");
celda.textContent = i == 2 ? parseFloat(v.value).toFixed(2) : v.value;
fila.appendChild(celda);
});

tabla.appendChild(fila);
document.body.appendChild(tabla);
this.reset();
event.preventDefault();

}, false);

}, false);

</script>
</head>
<body>

<h1>Persona</h1><br>
<form>
<label>Codigo</label><br>
<input type="text" id="txtCod"><br>
<label>Nombre</label><br>
<input type="text" id="txtNom"><br><br>
<label>Nota</label><br>
<input type="text" id="txtNota"><br><br>
<input type="submit" id="btnInsertar" value="Insertar">
<form>

</body>
</html>