Problema con innerHTML
Publicado por Tomas (2 intervenciones) el 06/01/2014 01:27:19
Mi intención es rellenar un div, cuando pulse un botón, con una tabla de dos columnas (día de la semana y ventas). Para ello he creado el siguiente código. El contenido del div aparece en líneas pero ni rastro de la estructura de la tabla. Si alguien fuera tan amable de indicarme que estoy haciendo mal le estaría muy agradecido.
<html>
<head>
<title>Aplicacion WEB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<script type="text/javascript">
function crearTabla(){
var labels=["Lunes","Martes","Miercoles","Jueves","Viernes","Sabado","Domingo"];
var values=[345,123,356,678,123,567,456,345,123,56,456,956];
var colorBars=["#0000FF","#FFFF00","#00FF00","#FF0000","#F87A17",
"#736F6E","#980517","#FFC0CB","#000000","#7931DF","#D4A017","#E18B6B"];
var caja=document.getElementById("tabla");
caja.innerHTML+="<table border=\"1\">";
for(i=0;i<labels.length;i++){
caja.innerHTML+="<tr><td>"+labels[i]+"</td><td>"+values[i]+"</td></tr>";
}
caja.innerHTML+="</table>";
}
</script>
<div>Aplicación Web</div>
<input type="button" name="boton" id=boton" value="Cargar tabla" onclick="crearTabla()">
<div id="tabla">
</div>
</body>
</html>
<html>
<head>
<title>Aplicacion WEB</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<script type="text/javascript">
function crearTabla(){
var labels=["Lunes","Martes","Miercoles","Jueves","Viernes","Sabado","Domingo"];
var values=[345,123,356,678,123,567,456,345,123,56,456,956];
var colorBars=["#0000FF","#FFFF00","#00FF00","#FF0000","#F87A17",
"#736F6E","#980517","#FFC0CB","#000000","#7931DF","#D4A017","#E18B6B"];
var caja=document.getElementById("tabla");
caja.innerHTML+="<table border=\"1\">";
for(i=0;i<labels.length;i++){
caja.innerHTML+="<tr><td>"+labels[i]+"</td><td>"+values[i]+"</td></tr>";
}
caja.innerHTML+="</table>";
}
</script>
<div>Aplicación Web</div>
<input type="button" name="boton" id=boton" value="Cargar tabla" onclick="crearTabla()">
<div id="tabla">
</div>
</body>
</html>
Valora esta pregunta
0
