JavaScript - Urgente creación de filas con dom

   
Vista:
Imágen de perfil de carlina

Urgente creación de filas con dom

Publicado por carlina (30 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

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
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de carlina

Urgente creación de filas con dom

Publicado por carlina (30 intervenciones) el 14/02/2014 23:57:24
Aquí está el archivo mejor en index
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Urgente creación de filas con dom

Publicado por xve (1595 intervenciones) el 15/02/2014 09:26:43
Ahora si que he podido probarlo... aqui tienes el error:


La primera vez, al no haber ninguna columna, no defines el th1...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar