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
![Me gusta: Está pregunta es útil y esta clara Me gusta: Está pregunta es útil y esta clara](/img/img.png?11.51)
![NO me gusta: Está pregunta no esta clara o no es útil No me gusta: Está pregunta no esta clara o no es útil](/img/img.png?11.51)
0