Duda para crear un input type=”text” desde DOM
Publicado por Ivan Camilo Rosales (2 intervenciones) el 05/05/2018 05:54:46
Hola, tengo una inquietud con el manejo del DOM estoy desarrollando una tabla que consta de 6 columnas (#Cuota, valorCouta, ValorExtra ,Intereses, AbonoCapital, Saldo) la idea es que al hacer click en input type="button" me genere la tabla con n filas, del mismo modo en la columna (ValorExtra) genere n numero de input type="text" ; el inconveniente que tengo como tal es que los input type="text" me les asigna el mismo atributo ID =”hola” , y la idea es que si el input está en la fila 5 el ID del input debe de ser ID=”hola5”.
He creado una función crearInput() que me crea n input pero no consigo poner ese input en la celda de la tabla. Gracias.
He creado una función crearInput() que me crea n input pero no consigo poner ese input en la celda de la tabla. Gracias.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!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>
Valora esta pregunta
0
