<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ejemplo de árbol</title>
<script>
function crea_bosque(){ var bosque = '';
var numarbol = document.getElementById("numarbol").value; for (i=0; i<numarbol; i++){ bosque += crea_arbol();
bosque += '<br/>';
}
document.getElementById("linea").innerHTML = bosque;
}
function crea_arbol(){ var numarbol = document.getElementById("numarbol").value; var altura = document.getElementById("altura").value; var resultado ="<table border='1'>";
if (numarbol == null || numarbol < 1 || isNaN(numarbol) ) { alert("Número de arboles: El campo se encuentra vacío."); return;
}
if (altura == null || altura < 1 || isNaN(altura) ) { alert("Num lineas: Solo son válidos números mayores que 1"); return;
}
//El primer bucle recorrerá las líneas
for (var i=1; i <= altura; i++) { resultado += "<tr>";
//Este bucle recorre los espacios en blanco previos en cada línea
for (var k=1; k <= altura-i; k++) { resultado += "<td> </td>";
}
//Este bucle pone los * correspondientes en cada línea
for(var j=1; j <= 2*i-1; j++) { resultado += "<td>*</td>";
}
//Este bucle recorre los espacios en blanco posterioes en cada línea
for (var k=1; k <= altura-i; k++) { resultado += "<td> </td>";
}
//Cerramos la línea
resultado +="</tr>";
}
//Cerramos la tabla
resultado += "</table>";
return resultado;
}
</script>
</head>
<body>
<div id="formulario">
<form>
<label>Altura: </label>
<input type="text" id="altura">
<label>Número de árboles: </label>
<input type="text" id="numarbol">
<input type="button" value="Crea arboles" onclick="crea_bosque()">
</form>
</div>
<div id="linea">
</div>
</body>
</html>
