Urgente creación de filas con dom
Publicado por carlina (31 intervenciones) el 14/02/2014 23:16:49
Urgente creación de filas con dom
Hola estoy creando una tabla con javascript. Con un botón creo las columnas. Y con otro las filas. Las columnas ó celdas sí me salen bien al oprimir el botón.
Tengo 2 botones, uno para celdas y uno para filas, yo solo debo poner la cantidad de celdas y filas y se crea.
Pero las filas me salen mal. Osea sí me salen bien, las que yo quiera, pero no contienen las celdas adecuadas adentro, sólo me salen las filas y tal vez con una celda cada fila.
Esto es para las celdas
Esto las filas
Qué tengo malo ahí?
Esto el HTML
Creo que es mejor así, si se podrá probar!
Voy a poner solo el body
Hola estoy creando una tabla con javascript. Con un botón creo las columnas. Y con otro las filas. Las columnas ó celdas sí me salen bien al oprimir el botón.
Tengo 2 botones, uno para celdas y uno para filas, yo solo debo poner la cantidad de celdas y filas y se crea.
Pero las filas me salen mal. Osea sí me salen bien, las que yo quiera, pero no contienen las celdas adecuadas adentro, sólo me salen las filas y tal vez con una celda cada fila.
Esto es para las celdas
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
function columnas(){
var cantidadColumnas = document.querySelector('#txtColum').value;
miTabla = document.createElement('table');
tbBody = document.createElement('tbody');
tr1 = document.createElement("tr");//th
tr2 = document.createElement("tr");//td tr
for (var i = 1; i <=cantidadColumnas; i++){
th1 = document.createElement("th");
td1 = document.createElement("td");
th1.innerHTML = 'Head';
td1.innerHTML = 'Cell';
tr1.appendChild(th1);
tr2.appendChild(td1);
tbBody.appendChild(tr1);
tbBody.appendChild(tr2);
miTabla.appendChild(tbBody);
miCapa = document.getElementById('divResultado');
miCapa.appendChild(miTabla);
}miTabla.setAttribute("width", "300px");
miTabla.setAttribute("border", "1");
th1.setAttribute("align", "center");
th1.setAttribute("width", "200px");
td1.setAttribute("align", "center");
td1.setAttribute("width", "200px");
}Esto las filas
1
2
3
4
5
6
7
8
9
10
11
12
function filaTabla(){
var cantidadFilas = document.querySelector('#txtFile').value;
var tbody = document.getElementsByTagName("tbody")[0];
for (var i = 1; i <= cantidadFilas; i++){
var td = document.createElement("td");
td.innerHTML = "new";
var tr = document.createElement("tr");
tr.appendChild(td);
tbBody.appendChild(tr);
}Qué tengo malo ahí?
Esto el HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
<div>
<label>Columnas</label>
<br>
<input type="text" id="txtColum" placeholder="td"/>
<button id ="generarColumnas">Generar Columnas</button><br>
<label>Filas</label>
<br>
<input type="text" id="txtFile" placeholder="tr" />
<button id ="generarTabla">Generar Tabla Filas</button><br>
<button id= "nuevaFila">nueva fila </button><br>
<button id ="guardarTabla">Guardar Tabla </button><br>
</div>
<div id="resultado"></div>
<div id="divResultado"></div>
</body>
Creo que es mejor así, si se podrá probar!
Voy a poner solo el body
QUIERO QUE CADA FILA QUE YO CREE TENGA SU TEHEAD CORRESPONDIENTE.
Valora esta pregunta
0
