Bueno paso a explicar: Tengo 12 DIV, aca solo pongo uno, este tienen el boton que cambia Disponible, Mantenimiento, Ocupado, y tiene otro boton alquilar pero ese nada que ver, ese estado lo guardo en el localstorage para que no se pierda al actualizar la pagina y los div estan creado con el CSS de abajo. Yo quiero crear un boton en alguna parte de esa pagina que sea "Crear habitación" Y que cuando pulse salga abajo del ultimo DIV otro más, pero igual a los que ya tengo creado e igual con los botones ¿cómo se puede hacer eso?
HTML tengo esto:
<h1>Control de Habitaciones:</h1>
<div id="grid_container">
<div style="height:100px;"> <div>1
<input id="Fmbtn" type="button" value=" Disponible " onclick="sig()" />
<a href="registrarcliente.php"> <button type="button">Alquilar</button></a>
</div> </div>
En Javascript tengo dos archivos exteronos.
El primero es el del boton:
function sig(){
var array = new Array(" Disponible ", " Ocupado ", " Mantenimiento ",);
for(i=0; i < array.length; i++){
if(document.getElementById('Fmbtn').value == array[i]){
var indice = (i + 1 == array.length) ? 0 : i + 1;
document.getElementById('Fmbtn').value = array[indice];
localStorage.setItem("estado", array[indice]);
break;
}
}
}
window.onload=function()
{
if(localStorage.getItem("estado")!=null)
{
estado =localStorage.getItem("estado");
document.getElementById('Fmbtn').value = estado;
}
}
Y este es del DIV:
function renderGrid(){
var blocks = document.getElementById("grid_container").children;
var pad = 10, cols = 3, newleft, newtop;
for(var i = 1; i < blocks.length; i++){
if (i % cols == 0) {
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
} else {
if(blocks[i-cols]){
newtop = (blocks[i-cols].offsetTop + blocks[i-cols].offsetHeight) + pad;
blocks[i].style.top = newtop+"px";
}
newleft = (blocks[i-1].offsetLeft + blocks[i-1].offsetWidth) + pad;
blocks[i].style.left = newleft+"px";
}
}
}
window.addEventListener("load", renderGrid, false);
window.addEventListener("resize", renderGrid, false);
Y por ultimo el CSS de los DIV:
div#grid_container{
width:900px;
margin:0px auto;
height:860px;
border:#999 1px dashed;
}
div#grid_container > div{
position:absolute;
width: 291px;
border: blue 1px solid;
}
div#grid_container > div:nth-child(2n+0) {
background: blue;
}
div#grid_container > div:nth-child(2n+1) {
background: blue;
}
div#grid_container > div > div{ padding: 20px; font-size: 27px; color:#D9A800; }
Nuevo ejemplo:
<script type="text/javascript">
function sig(){
var array = new Array(" Disponible ", " Ocupado ", " Mantenimiento ",);
for (i = 0; i < array.length; i++) {
if(document.getElementById('Fmbtn').value == array[i]) {
var indice = (i + 1 == array.length) ? 0 : i + 1;
document.getElementById('Fmbtn').value = array[indice];
localStorage.setItem("estado", array[indice]);
break;
}
}
}
window.onload=function()
{
if(localStorage.getItem("estado") != null) {
estado =localStorage.getItem("estado");
document.getElementById('Fmbtn').value = estado;
}
}
var i = 0;
function sig() {
var array = new Array(" Disponible ", " Ocupado ", " Mantenimiento ");
if (i + 1 < array.length) {
i++;
crearDivs(array[i], array);
} else {
i = 0;
crearDivs(array[i], array);
}
}
function crearDivs(nameDiv, array) {
let divNuevo = document.createElement('div');
divNuevo.classList.add('divs');
divNuevo.innerHTML = nameDiv;
document.getElementById('container').appendChild(divNuevo);
document.getElementById('Fmbtn').value = array[i];
}
</script>
<style>
.divs {
float: left;
width: 100px;
height: 50px;
background: red;
margin-left: 20px;
color: blue;
}
</style>
<div class="row" style="text-align:center">
<div class="span2">
<div class="well well-small">
<h4>Habitación 1
</h4>
<input id="Fmbtn" type="button" value=" Disponible " onclick="sig()" />
</div>
</div>
<div id='container'></div>