He creado una función crearInput() que me crea n input pero no consigo poner ese input en la celda de la tabla. Gracias.
Código Javascript :
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<body>
<div class="row">
<div class="col-2">
<label>Saldo</label>
<input type="text" class="form-control" id="Valsaldo">
</div>
<div class="col-2">
<label>Varlor Primera Cuota</label>
<input type="text" class="form-control" name="Val1Cuota" id="Val1Cuota" placeholder="Ingresa el Valor de la primera cuota">
</div>
<div class="col-1">
<label>Interes</label>
<input type="text" name="valIntereses" id="valIntereses" class="form-control">
</div>
<div class="col-1">
<label>Gradiente</label>
<input type="text" name="valGradiente" id="valGradiente" class="form-control">
</div>
<div class="col-1">
<label>Periodos</label>
<input type="text" class="form-control" id="numPeriodos" onchange="numfilas()">
</div>
<div class="col-4">
<input type="button" value="Obtener Valor del input4" onclick="valorInput()">
</div>
</div>
<div id="resultado" class="alert alert-primary"></div>
<div class="col-7">
<table id="myTable" class="table table-hover table-bordered table-striped table-sm ">
<thead class="thead-dark" >
<tr>
<th># Cuota</th>
<th>Valor Cuota</th>
<th>Valor Extra</th>
<th>Interes</th>
<th>Abono Capital</th>
<th>Saldo</th>
</tr>
</thead>
<tbody id="campos">
</tbody>
</table>
</div>
<script>
var resultado;
//obtenemos el valor de la 1 cuota
var val1Cuota,filas,valInte,interesDecimal,valGrdi,saldo;
function datos(){
val1Cuota = document.getElementById("Val1Cuota").value;
valInte = document.getElementById("valIntereses").value;
interesDecimal= valInte/100;
valGrdi = document.getElementById("valGradiente").value;
saldo = document.getElementById("Valsaldo").value;
filas = document.getElementById("numPeriodos").value;
resultado = document.getElementById("resultado");
}
function CrearMyTable(NumRows){
//val1Cuota = document.getElementById("Val1Cuota").value;
datos();
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
cell1.innerHTML = NumRows;
cell2.innerHTML = "dfgdghf";
//cell3.innerHTML = '<div id="cajaTexto"> </div>';
cell3.innerHTML ='<input type="text" id="valExtra" class="form-control">';
cell4.innerHTML ="Saldo * interes";
cell5.innerHTML ="ValCuota - interes";
cell6.innerHTML ="saldo - ValExtra - AbonoCapital";
}
function crearInput(NumRows){
for(var n=1;n<=NumRows;n++){
var newInput = document.createElement("input");
newInput.setAttribute("type","text");
newInput.setAttribute("class","form-control");
newInput.setAttribute("id","ValExtra"+n);
$("#cajaTexto").appendChild(newInput);
console.log(newInput);
}
}
function $(selector){
return document.querySelector(selector);
}
function numfilas(){
//filas = document.getElementById("numPeriodos").value;
datos();
for(var i=filas;i>=1;i--){
var temC=0;
CrearMyTable(i);
}
}
</script>
</body>
</html>
