Foros del Web » Programando para Internet » Javascript »

Ayuda javascript tablas y checkboxes

 Estas en el tema de Ayuda javascript tablas y checkboxes en el foro de Javascript en Foros del Web. Buenas, soy nuevo en esta pagina y en todo lo relacionado con HTML y javascript, ya que asta ahora solo e usado java para programar ...
  #1 (permalink)  
Antiguo 06/10/2008, 14:17
 
Fecha de Ingreso: octubre-2008
Mensajes: 10
Antigüedad: 15 años, 7 meses
Puntos: 0
Ayuda javascript tablas y checkboxes
Buenas, soy nuevo en esta pagina y en todo lo relacionado con HTML y javascript, ya que asta ahora solo e usado java para programar y nunca e visto paginas web ni nada d eso y necesito ayuda en una cosa de un trabajo de la universidad, necesito a partir de checkboxes seleccionar que columnas de una tabla quiero ver (la tabla es de 20 filas y 3 columnas) y crearla la creo (en memoria se podria decir) pero al ir a imprimirla no soy capaz encima cuando añado la funcion que hace eso se me pierde la hora que tengo puesta que se obtiene con otra funcion, sin mas tonterias dejo el codigo:

Código PHP:
<html>

  <head>

    <script type="text/javascript">
      function startTime()
{
        var hoy=new Date();

        var mes=new Array(12);
          
mes[0]="Enero";
          mes[1]="Febrero";

          mes[2]="Marzo";
          
mes[3]="Abril";

          mes[4]="Mayo";

          mes[5]="Junio";
          
mes[6]="Julio";

          mes[7]="Agosto";
          
mes[8]="Septiembre";

          mes[9]="Octubre";

          mes[10]="Noviembre";

          mes[11]="Diciembre";

        var hora=hoy.getHours();
        var minuto=hoy.getMinutes();
        var segundo=hoy.getSeconds();
        
var dia=hoy.getDate();
        
var nombreMes=mes[hoy.getMonth()];
        
var anyo=hoy.getFullYear();

        // add a zero in front of numbers<10
minuto=checkTime(minuto);
segundo=checkTime(segundo);

        document.getElementById('fecha').innerHTML=dia+" de "+nombreMes+" de "+anyo+"<br>"+hora+":"+minuto+":"+segundo;
        
t=setTimeout('startTime()',500);
      
}
      

function checkTime(i)
{
        
if (i<10)
  {
          i="0" + i;

        }
        return i;
      
}


      function modificarColorFondo() {
        document.bgColor = document.fondo.color.value;
      }
      function modificarColorLinkNoVisitado() {
        document.body.vLink = document.linknovisitado.color.value;
      }
      function modificarColorLinkVisitado() {
        document.body.link = document.linkvisitado.color.value;
      }
      function verColumnas(){
        var tabla = new Array(20);
        var tablaa = new Array(20);
        var tablaaa = new Array(20);
        for (i=0;i<tabla.length;i++)
{

          tabla[i]="Fila "+i+", Columna 1";
          tablaa[i]="Fila "+i+", Columna 2";
          tablaaa[i]="Fila "+i+", Columna 3";
        }
        var tablas = "<table width=\"150\">";
    for (i=0; i<tabla.length; i++) {
      if (i&#37;2=0){
        tablas = tablas +"<tr bgcolor=\"lightskyblue\">";
      } 
          else {
        tablas = tablas +"<tr bgcolor=\"lightgrey\">";
          }
      for (j=0; j<3; j++) {
        if((document.columnas.columna.checked)&&(j == 0)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tabla[i]+"]</td>" ;
        }        
        if((document.columnas.columnaa.checked)&&(j == 1)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tablaa[i]+"]</td>" ;
        }    
        if((document.columnas.columnaaa.checked)&&(j == 2)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tablaaa[i]+"]</td>" ;
        }        
      }
      tablas = tablas +"</tr>";
    }
    tablas = tablas +"</table>";
    document.getElementById('MostrarTabla').innerHTML=tablas;
      }
    </script>
  
</head>
  

<body onload="startTime(); verColumnas()">

    <div align=right id="fecha"></div>

    <form name="fondo">
      <input type="button" value="Modificar Color Fondo" onclick="modificarColorFondo()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <form name="linknovisitado">
      <input type="button" value="Modificar Color Link No Visitado" onclick="modificarColorLinkNoVisitado()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <form name="linkvisitado">
      <input type="button" value="Modificar Color Link Visitado" onclick="modificarColorLinkVisitado()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <a href=actividad1.html>Link a ésta misma página!</a><br><br/>
    <form name="columnas">
      Columna 1:
      <input type="checkbox" name="columna" value="1"><br>
      Columna 2: 
      <input type="checkbox" name="columnaa" value="2"><br>
      Columna 3: 
      <input type="checkbox" name="columnaaa" value="3"><br>
      <input type="button" value="Ver columnas seleccionadas" onclick="verColumnas()">
    </form>
    <div align=right id="MostrarTabla"></div>

  

</body>

</html> 
Última edición por cresdent; 06/10/2008 a las 14:55
  #2 (permalink)  
Antiguo 06/10/2008, 14:32
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 16 años
Puntos: 43
Respuesta: Ayuda javascript tablas y checkboxes
EDITADO: Creo que he entendido, despues de todo
Código PHP:
<html>

  <head>

    <script type="text/javascript">
      function startTime()
{
        var hoy=new Date();
        var mes=new Array(12);
mes[0]="Enero";
mes[1]="Febrero";
mes[2]="Marzo";         
mes[3]="Abril";
mes[4]="Mayo";
mes[5]="Junio";        
mes[6]="Julio";
mes[7]="Agosto";        
mes[8]="Septiembre";
mes[9]="Octubre";
mes[10]="Noviembre";
mes[11]="Diciembre";

var hora=hoy.getHours();
var minuto=hoy.getMinutes();
var segundo=hoy.getSeconds();      
var dia=hoy.getDate();   
var nombreMes=mes[hoy.getMonth()];      
var anyo=hoy.getFullYear();

        // add a zero in front of numbers<10
minuto=checkTime(minuto);
segundo=checkTime(segundo);

        document.getElementById('fecha').innerHTML=dia+" de "+nombreMes+" de "+anyo+"<br>"+hora+":"+minuto+":"+segundo;
        
t=setTimeout('startTime()',500);
      
}
      

function checkTime(i)
{
        
if (i<10)
  {
          i="0" + i;

        }
        return i;
      
}


      function modificarColorFondo() {
        document.bgColor = document.fondo.color.value;
      }
      function modificarColorLinkNoVisitado() {
        document.body.vLink = document.linknovisitado.color.value;
      }
      function modificarColorLinkVisitado() {
        document.body.link = document.linkvisitado.color.value;
      }
      function verColumnas(){
        var tabla = new Array(20);
        var tablaa = new Array(20);
        var tablaaa = new Array(20);
        for (i=0;i<tabla.length;i++)
{

          tabla[i]="Fila "+i+", Columna 1";
          tablaa[i]="Fila "+i+", Columna 2";
          tablaaa[i]="Fila "+i+", Columna 3";
        }
        var tablas = "<table width=\"150\" border=\"1\">";
    for (i=0; i<tabla.length; i++) {
      if (i&#37;2==0){
        tablas = tablas +"<tr bgcolor=\"lightskyblue\">";
      } 
          else {
        tablas = tablas +"<tr bgcolor=\"lightgrey\">";
          }
      for (j=0; j<3; j++) {
        if((document.columnas.columna.checked)&&(j == 0)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tabla[i]+"]</td>" ;
        }        
        if((document.columnas.columnaa.checked)&&(j == 1)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tablaa[i]+"]</td>" ;
        }    
        if((document.columnas.columnaaa.checked)&&(j == 2)){        
          tablas = tablas +"<td width=\"30\" align=\"center\">["+tablaaa[i]+"]</td>" ;
        }        
      }
      tablas = tablas +"</tr>";
    }
    tablas = tablas +"</table>";
    document.getElementById('MostrarTabla').innerHTML=tablas;
      }
    </script>
  
</head>
  

<body onload="verColumnas()">

    <div align=right id="fecha"></div>

    <form name="fondo">
      <input type="button" value="Modificar Color Fondo" onclick="modificarColorFondo()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <form name="linknovisitado">
      <input type="button" value="Modificar Color Link No Visitado" onclick="modificarColorLinkNoVisitado()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <form name="linkvisitado">
      <input type="button" value="Modificar Color Link Visitado" onclick="modificarColorLinkVisitado()">
      
<select name="color">
        <option value="yellow">Amarillo</option>
        <option value="blue">Azul</option>

        <option value="white">Blanco</option>
        
<option value="gray">Gris</option>

        <option value="magenta">Magenta</option>

        <option value="brown">Marrón</option>
        
<option value="orange">Naranja</option>
        
<option value="black">Negro</option>
        <option value="gold">Oro</option>
        
<option value="silver">Plata</option>

        
<option value="red">Rojo</option>
        <option value="pink">Rosa</option>
        
<option value="green">Verde</option>
        
<option value="violet">Violeta</option>
      </select>
    </form>


    <a href=actividad1.html>Link a ésta misma página!</a><br><br/>
    <form name="columnas">
      Columna 1:
      <input type="checkbox" name="columna" value="1"><br>
      Columna 2: 
      <input type="checkbox" name="columnaa" value="2"><br>
      Columna 3: 
      <input type="checkbox" name="columnaaa" value="3"><br>
      <input type="button" value="Ver columnas seleccionadas" onclick="javascript:verColumnas()">
    </form>
    <div align=right id="MostrarTabla"></div>

  

</body>

</html> 
Saludos
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
Última edición por the_web_saint; 06/10/2008 a las 14:43 Razón: comprensión
  #3 (permalink)  
Antiguo 07/10/2008, 15:39
 
Fecha de Ingreso: octubre-2008
Mensajes: 10
Antigüedad: 15 años, 7 meses
Puntos: 0
Respuesta: Ayuda javascript tablas y checkboxes
muxisimas gracias, pero me podrias comentar cual fue mi fallo? plz
  #4 (permalink)  
Antiguo 08/10/2008, 09:49
Avatar de the_web_saint  
Fecha de Ingreso: mayo-2008
Ubicación: localhost/tierra/america/panama
Mensajes: 1.229
Antigüedad: 16 años
Puntos: 43
Respuesta: Ayuda javascript tablas y checkboxes
Si comparas los dos codigos te darás cuenta que solo cambie estas dos lineas
Código PHP:
<body onload="verColumnas()">
......................

<input type="button" value="Ver columnas seleccionadas" onclick="javascript:verColumnas()"> 
__________________
..::The Saint::..
El pesimista se queja del viento; el optimista espera que cambie; el realista ajusta las velas.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 08:52.