crear tabla dinamicamente

[vitttoh]

Tengo una tabla y un select, la cual quiero agregar filas con unos textbox dependiendo de la cantidad que escoja en el select.

<select id="pisos">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<table style="width: 100%" border="0" class="tablaConBorde table" name="tablaPisos" id="tablaPisos" >
</table>

agrego los textbox manualmente de esta forma

function agregarPisos()
{
var table = document.getElementById("tablaPisos");
{
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);

cell1.innerHTML = 'N° Piso<input disabled class="form-control " type="text" id="7_piso_num" value="" name="7_piso_num" >';
cell2.innerHTML = 'm2<input class="form-control" type="text" id="7_piso_m2" value="" name="7_piso_m2">';
cell3.innerHTML = 'N° Piso<input disabled class="form-control " type="text" id="7_piso_num2" value="" name="7_piso_num2" >';
cell4.innerHTML = 'm2 <input class="form-control" type="text" id="7_piso2_m2" value="" name="7_piso2_m2" >';
cell5.innerHTML = 'N° Piso<input disabled class="form-control " type="text" id="7_piso_num3" value="" name="7_piso_num3" >';
cell6.innerHTML = 'm2 <input class="form-control" type="text" id="7_piso3_m2" value="" name="7_piso3_m2" >';
}
}


LO QUE NECESITO HACER ES CON UN SELECT, DEPENDIENDO DEL VALOR QUE SE ESCOJA AGREGAR LA CANTIDAD DE DATOS EN LA TABLA, ME EXPLICO MEJOR.

SI EN EL SELECT ESCOJO 6, AGREGO 2 FILAS CON 3 TEXTBOX CADA FILA, YA QUE SOLO TIENEN QUE IR 3 TEXTBOX POR FILA, SI ESCOJO EN EL SELECT EL VALOR 9, SE DEBEN CREAR 3 FILAS CON 3 TEXTBOX CADA FILA.

alguna ayuda?

[Alexis88]

Si quieres que eso ocurra inmediatamente después de seleccionar una opción, registra el evento change en el <select>, toma su valor, el cual corresponde al de la opción seleccionada, y utilizando una estructura cíclica, añade las filas.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector("#pisos").addEventListener("change", function(){
        var cantidad = this.value;
        for (var i = 0; i < cantidad; i++){
            //Añade cada fila
        }
    }, false);
}, false);
 

Un saludo

[vitttoh]

Iniciado por Alexis88

Si quieres que eso ocurra inmediatamente después de seleccionar una opción, registra el evento change en el <select>, toma su valor, el cual corresponde al de la opción seleccionada, y utilizando una estructura cíclica, añade las filas.

Código Javascript:

document.addEventListener("DOMContentLoaded", function(){
    document.querySelector("#pisos").addEventListener("change", function(){
        var cantidad = this.value;
        for (var i = 0; i < cantidad; i++){
            //Añade cada fila
        }
    }, false);
}, false);
 

Un saludo

Muchas gracias, no quiero aprovecharme de tu voluntan en ayudarme, pero me surge la siguiente complicación:

tu codigo me resuelve lo de la selección del "select", pero no se como realizar que al momento de agregar las filas, ingrese solo 3 textbox como máximo, por ejemplo

si en el "select" elijo 1, se debe agregar una fila con un textbox
si en el "select" elijo 2, se debe agregar una fila con 2 textbox
si en el "select" elijo 3, se debe agregar una fila con 3 textbox
si en el "select" elijo 4, se debe agregar 2 filas, en la 1ra con 3 textbox y en la 2da 1 textbox

se entiende?

[Alexis88]

Bueno, como puedes ver, el valor del combo es fácil de capturar; ahora, solo necesitas condiciones.