JavaScript - Ceacion de Tabla Dinamica Con JavaScript

   
Vista:
Imágen de perfil de francisco jose

Ceacion de Tabla Dinamica Con JavaScript

Publicado por francisco jose francoleopard21@gmail.com (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

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");
}
 
}
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