Crear una tabla con JavaScript

dglypho · #1 (**permalink**) 22/11/2014, 13:23

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.

IsaBelM · #2 (**permalink**) 22/11/2014, 14:58

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

dglypho · #3 (**permalink**) 24/11/2014, 13:30

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 originalvar columna=new Array();
columna[0]=1;
columna[1]=2;
columna[2]=3;
columna[3]=4;
columna[4]=5;
columna[5]=6;
var filas=new Array();
filas[0]=1;
filas[1]=2;
filas[2]=3;
filas[3]=4;
filas[4]=5;
var tabla=new Array();
tabla[0]=columna;
tabla[1]=filas;
function crearTabla(){
    var tbl = document.getElementById("tabla");
    var tblBody = document.createElement("tbody");
    for (var i = 0; i < columna.length; i++) {
        var fila = document.createElement("tr");
        for (var j = 0; j < filas.length; j++) {
            var celda = document.createElement("td");
            var textoCelda = document.createTextNode(i+"-"+j);
            celda.appendChild(textoCelda);
            fila.appendChild(celda);
        }
        tblBody.appendChild(fila);
    }
    tbl.appendChild(tblBody);
    tbl.setAttribute("border", "2");
}

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?