tengo una tabla, y quiero enumerar los elementos de la primera fila, la de los periodos del 0 a x cantidad de periodos pero no he podido
let cp = document.querySelector("#cp")
let saldo = document.querySelector("#saldo")
let intereses = document.querySelector("#intereses")
let periodos = document.querySelector("#periodos")
let btn = document.querySelector("#btn")
var body = document.getElementsByTagName("body")[0]
function newTable(){
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
for (let i = 0; i <= parseInt(periodos.value); i++) {
var encabezado = document.createElement("tr")
var hilera = document.createElement("tr");
hilera.setAttribute("class", "hilera")
var selectorHilera = document.getElementsByClassName("hilera")
for (let j = 0; j < 5; j++) {
switch (j) {
case 0:
var textoEncabezado = document.createTextNode("Periodo")
break;
case 1:
var textoEncabezado = document.createTextNode("Interez")
break
case 2:
var textoEncabezado = document.createTextNode("Cuota/Pago")
break
case 3:
var textoEncabezado = document.createTextNode("Abono")
break
case 4:
var textoEncabezado = document.createTextNode("Saldo")
break
default:"NDT"
break;
}
var celdaEncabezado = document.createElement("td")
var celda = document.createElement("td");
var texto = document.createTextNode("12345")
celdaEncabezado.appendChild(textoEncabezado)
encabezado.appendChild(celdaEncabezado)
encabezado.setAttribute("style", "background-color: #0000ff")
celda.appendChild(texto)
hilera.appendChild(celda)
}
tblBody.appendChild(hilera)
}
tabla.appendChild(encabezado)
tblBody.setAttribute("id", "tabla")
tabla.appendChild(tblBody)
body.appendChild(tabla)
tabla.setAttribute("border", "2")
}
btn.addEventListener("click", newTable)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="Cuota/Pago" id="cp">
<br>
<input type="text" placeholder="Saldo" id="saldo" >
<br>
<input type="text" placeholder="Intereses" id="intereses">
<br>
<input type="text" placeholder="Periodos" id="periodos">
<br>
<input type="button" value="Generar Intereses" id="btn">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js.js"></script>
</body>
</html>