JavaScript - Problema con innerHTML

   
Vista:

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>
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

Problema con innerHTML

Publicado por Tomas (2 intervenciones) el 06/01/2014 10:54:34
Al final lo he resuelto. No entiendo muy bien porque no me deja acumular las lineas de código con el bucle FOR y meterlas directamente con innerHTML.
Solución alternativa que he encontrado, creo una nueva variable llamada codigo que será el String que me almacene toda la tabla y cuando tengo todo el código lo meto en la caja de una sola vez con innerHTML.

Quedaría así:

<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");
var codigo="<table border=\"1\">";
// caja.innerHTML+="<table border=\"1\">";

for(i=0;i<labels.length;i++){
// caja.innerHTML+="<tr style=\"background-color:"+colorBars[i]+"\"><td>"+labels[i]+"</td><td>"+values[i]+"</td></tr>";
codigo+="<tr style=\"background-color:"+colorBars[i]+"\"><td>"+labels[i]+"</td><td>"+values[i]+"</td></tr>";

}
// caja.innerHTML+="</table>";
codigo+="</table>";
caja.innerHTML=codigo;

}
</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 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

Problema con innerHTML

Publicado por xve (1595 intervenciones) el 06/01/2014 11:32:51
buena solución Tomas... yo habría hecho lo mismo... trabajar con variables, y luego publicarlo todo de golpe.

De esta manera, si tardase en hacer el proceso (no seria este el caso), podrías mostrar un reloj en la pantalla.
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