Ceacion de Tabla Dinamica Con JavaScript
Publicado por francisco jose (2 intervenciones) el 10/01/2016 23:34:41
Saludos amigos colegas todos... estoy por aca para solicitarles me ayuden con un detalle en un codigo JavaScript. y a su ver para aportar ideas en este foro..
El caso es que tengo dos ListBox para seleccionar un rango de fechas (año), el cual me debe crear tantas filas como años tiene el rango seleccionado y las columnas son fijas a 5, por los momentos logre crear la tabla per... aqui viene lo bueno.. jeje..
Para crearla estoy usando un botón. la cual no quiero utilizar. debe ir en el evento onChange del Select. pero son dos select. en cual de los dos iria la llamada a la función??? eso por una parte. la otra es que al estar creada la tabla (GRID) si decido cambiar el rango de fechas me crea otra tabla debajo de la anterior... quiero que se modifique la que ya esta creada!!.. anexo están los dos archivos que uso!! select.php y funciones.js. gracias a todos de antemano. luego de resolver esto les realizare otra consulta de este mismo proyecto... porque quiero que los año que seleccione aparezcan en las filas en orden ascendente.. pero lo podemos ver luego. gracias amigos..
CODIGO DE LA PAGINA SELECT.PHP
CODIGO EL ARCHIVO FUNCIONES.JS
El caso es que tengo dos ListBox para seleccionar un rango de fechas (año), el cual me debe crear tantas filas como años tiene el rango seleccionado y las columnas son fijas a 5, por los momentos logre crear la tabla per... aqui viene lo bueno.. jeje..
Para crearla estoy usando un botón. la cual no quiero utilizar. debe ir en el evento onChange del Select. pero son dos select. en cual de los dos iria la llamada a la función??? eso por una parte. la otra es que al estar creada la tabla (GRID) si decido cambiar el rango de fechas me crea otra tabla debajo de la anterior... quiero que se modifique la que ya esta creada!!.. anexo están los dos archivos que uso!! select.php y funciones.js. gracias a todos de antemano. luego de resolver esto les realizare otra consulta de este mismo proyecto... porque quiero que los año que seleccione aparezcan en las filas en orden ascendente.. pero lo podemos ver luego. gracias amigos..
CODIGO DE LA PAGINA SELECT.PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<form name="frmfecha" id="frmfecha" >
<label for="anoInicio">Año de Inicio</label>
<select class="form-control" name="anoInicio" id="anoInicio" required="">
<option value="" selected="">SELECCIONE</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<!-- este valor deberia ser un valor seleccionable obtenido de la BD asignado en la tabla de trimestres (crear tabla)--></select>
<label for="trimestreinicio">Trimestre del año Inicio</label>
<select class="form-control" name="trimesreInicio" id="trimesreInicio" required="">
<option value="#" selected="">SELECCIONE</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<!-- este valor deberia ser un valor seleccionable obtenido de la BD asignado en la tabla de trimestres (crear tabla)--></select>
<br>
<label for="anofinal">Año de Final</label>
<select class="form-control" name="anoFinal" id="anoFinal" required="">
<option value="" selected="">SELECCIONE</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<!-- este valor deberia ser un valor seleccionable obtenido de la BD asignado en la tabla de trimestres (crear tabla)--></select>
<label for="trimestrefinal">Trimestrel al Año Final</label>
<select class="form-control" name="trimestreFinal" id="trimestreFinal" required="">
<option value="#" selected="">SELECCIONE</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<!-- este valor deberia ser un valor seleccionable obtenido de la BD asignado en la tabla de trimestres (crear tabla)--></select>
<input type="button" value="Genera una tabla" onclick="comprobar()">
<br>
<script src="funciones.js"></script>
</form>
CODIGO EL ARCHIVO FUNCIONES.JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function comprobar()
{var anoInicio = document.frmfecha.anoInicio.value;
var anoFinal = document.frmfecha.anoFinal.value;
if (anoInicio == "" || anoFinal == "")
{alert("Debe Seleccionar un rango de fechas");
} else {
var anos = anoFinal - anoInicio + 1; //Aqui calculo la diferencia de los años. esa diferencia son las lineas a crean en la tabla.
// alert(anos);
// function genera_tabla() {
// Obtener la referencia del elemento body
var body = document.getElementsByTagName("body")[0];
// Crea un elemento <table> y un elemento <tbody>
var tabla = document.createElement("table");
var tblBody = document.createElement("tbody");
// Crea las celdas
for (var i = 1; i < anos; i++) {
// Crea las hileras de la tabla
var hilera = document.createElement("tr");
for (var j = 0; j < 5; j++) {
// Crea un elemento <td> y un nodo de texto, haz que el nodo de
// texto sea el contenido de <td>, ubica el elemento <td> al final
// de la hilera de la tabla
var celda = document.createElement("td");
var textoCelda = document.createTextNode("celda en la hilera " +i+ ", columna "+j);
celda.appendChild(textoCelda);
hilera.appendChild(celda);
} // agrega la hilera al final de la tabla (al final del elemento tblbody)
tblBody.appendChild(hilera);
} // posiciona el <tbody> debajo del elemento <table>
tabla.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tabla);
// modifica el atributo "border" de la tabla y lo fija a "2";
tabla.setAttribute("border", "2");
}}- funciones.zip(1,4 KB)
Valora esta pregunta
0