Foros del Web » Programando para Internet » Javascript »

Crear una tabla con JavaScript

Estas en el tema de Crear una tabla con JavaScript en el foro de Javascript en Foros del Web. Hola a todos, tengo el siguiente código HTML y necesito crear con el una tabla en JavaScript Código HTML: <!DOCTYPE html> <html lang= "en" > ...
  #1 (permalink)  
Antiguo 22/11/2014, 13:23
 
Fecha de Ingreso: noviembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Crear una tabla con JavaScript

Hola a todos, tengo el siguiente código HTML y necesito crear con el una tabla en JavaScript

Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cines</title>
	<script type="text/javascript" src="funciones.js"></script>
</head>
<body onload="crearTabla()">
	<table id="tabla"></table>
	<p>Esta tabla ha sido creada con JavaScript en vez de la manera tradicional usada con HTML</p>
</body>
</html> 
El código JavaScript que tengo es el siguiente pero no me funciona no se si será porque esta mal o porque no es así.

Código HTML:
function crearTabla(){
		var miTabla=document.getElementById('tabla');
		for(var i=0;i<columnas.length;i++){
			miTabla.appendChild("<tr>");
			for(var j=0;j<filas.length;i++){
				miTabla.appendChild("<td>"+i+"-"+j+"</td>");
			}
			miTabla.appendChild("</tr>");
		}
	}
Muchas gracias por la ayuda.

Última edición por dglypho; 22/11/2014 a las 13:28
  #2 (permalink)  
Antiguo 22/11/2014, 14:58
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 9 meses
Puntos: 1012
Respuesta: Crear una tabla con JavaScript

hay distintas maneras de hacerlo. si quieres continuar con esa tiene 3 errores
  • las variables columnas y filas no están definidas
  • cambia for(var j=0;j<filas.length;i++) por for(var j=0;j<filas.length;j++)
por otro lado busca información sobre document.createDocumentFragment() para añadir elementos al dom
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 24/11/2014, 13:30
 
Fecha de Ingreso: noviembre-2014
Mensajes: 27
Antigüedad: 9 años, 4 meses
Puntos: 0
Respuesta: Crear una tabla con JavaScript

Ya he conseguido crear la tabla. Os pongo el código por si a alguien le interesa ver como lo he hecho:

Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="css/estilo.css">
	<script type="text/javascript" src="js/funciones.js"></script>
</head>
<body onload="crearTabla()">
	<section id="butaca">
		<p></p>
		<p></p>
		<table id="tabla" onclick="cambiaColor()"></table>
	</section>
</body>
</html> 

Código Javascript:
Ver original
  1. var columna=new Array();
  2. columna[0]=1;
  3. columna[1]=2;
  4. columna[2]=3;
  5. columna[3]=4;
  6. columna[4]=5;
  7. columna[5]=6;
  8. var filas=new Array();
  9. filas[0]=1;
  10. filas[1]=2;
  11. filas[2]=3;
  12. filas[3]=4;
  13. filas[4]=5;
  14. var tabla=new Array();
  15. tabla[0]=columna;
  16. tabla[1]=filas;
  17. function crearTabla(){
  18.     var tbl = document.getElementById("tabla");
  19.     var tblBody = document.createElement("tbody");
  20.     for (var i = 0; i < columna.length; i++) {
  21.         var fila = document.createElement("tr");
  22.         for (var j = 0; j < filas.length; j++) {
  23.             var celda = document.createElement("td");
  24.             var textoCelda = document.createTextNode(i+"-"+j);
  25.             celda.appendChild(textoCelda);
  26.             fila.appendChild(celda);
  27.         }
  28.         tblBody.appendChild(fila);
  29.     }
  30.     tbl.appendChild(tblBody);
  31.     tbl.setAttribute("border", "2");
  32. }

Ahora lo que quiero hacer es que al pulsar sobre una de las celdas de la tabla esta cambie de color, pero no se como hacerlo. ¿Alguna ayuda por favor?

Etiquetas: funcion, html, js, tabla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:12.