ordinare delle table in 2 o più colonne

**lanvoel** · 08-01-2020, 23:34

Il seguente codice visualizza il calendario di un anno qualsiasi, dopo l’input dell’anno stesso.

codice:

<!doctype html>
</html>
<head>
<style>
#id_tab
{
position:relative;
top:100px;
left:100px;
color:red
}
</style>
</head>
<body>
<script>
mesi = new Array(
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembre");
giorni_mese = new Array(12);
giorni_mese[0]=31;
giorni_mese[1]=28;
giorni_mese[2]=31;
giorni_mese[3]=30;
giorni_mese[4]=31;
giorni_mese[5]=30;
giorni_mese[6]=31;
giorni_mese[7]=31;
giorni_mese[8]=30;
giorni_mese[9]=31;
giorni_mese[10]=30;
giorni_mese[11]=31;
var lista_mesi
var anno=prompt("Inserisci anno del calendario", " ");
for (lista_mesi=0; lista_mesi<=11; lista_mesi++)
{
var annox=new Date();
annox.setYear(anno);
annox.setMonth(lista_mesi);
annox.setDate(1);
oggi_giorno=annox.getDay();  //il giorno odierno (1 lunedi,2 martedi ecc..., domenica 7)
oggi_mese=annox.getMonth();
oggi_data=annox.getDate();
oggi_anno=annox.getFullYear();

codice:

if (((oggi_anno % 4 == 0) && !(oggi_anno % 100 == 0)) || (oggi_anno % 400 == 0)) //verifica se anno bisestile
{
  giorni_mese[1]=29;         //incremento di 1 a febbraio
}
spazi_inizio=oggi_data;     //spazi_inizio contiene il giorno del mese
while (spazi_inizio > 7)    //si tolgono i multipli di 7 dal giorno delmese
{
  spazi_inizio-=7;          
}
spazi_inizio = oggi_giorno - spazi_inizio;  //calcolo giorni da "scartare" ad inizio tabella
if (spazi_inizio < 0)       //verifica 
{
  spazi_inizio+=7;
}
//stampa tabella contente il calendario 
id_tab=lista_mesi+"xxx"
document.write("<TABLE id=id_tab border=2 >");
//stampa della primariga con mese e anno
document.write("<TR><TD colspan=7><CENTER><B>"+mesi[oggi_mese]+" " +oggi_anno+"</B></CENTER></TD></TR>");
document.write("<TR>");
document.write("<TD align=center>Lun</TD>");
document.write("<TD align=center>Mar</TD>");
document.write("<TD align=center>Mer</TD>");
document.write("<TD align=center>Gio</TD>");
document.write("<TD align=center>Ven</TD>");
document.write("<TD align=center>Sab</TD>");
document.write("<TD align=center>Dom</TD>"); 
document.write("</TR>");
document.write("<TR>");
//stampa colonne vuote a inizio tabella
for (s=0;s<spazi_inizio;s++) 
{
  document.write("<TD> </TD>");
}
i=1;
//stampa celle contenenti i giorni del mese
while (i <= giorni_mese[oggi_mese]) 
{
  //stampa di ogni riga con ciclo  for
  //si usa spazi_inizio per saltare le prime celle vuote se presenti
  //dalla seconda riga b inizia sempre da 0 in quanto
  for (b = spazi_inizio;b<7;b++) 
  {
    document.write("<TD>");
    if (i <= giorni_mese[oggi_mese])  //stampa giorno del mese se mese non è ancora finito
    {
      document.write(i);
    }
    else 
    {
      document.write(" ");
    }
    if (i==oggi_data) 
    {
      document.write("</B></FONT>");
    }
    document.write("</TD>");
    i++;                      //incremento indice di riga
  }
  document.write("</TR>");
  document.write("<TR>");
  spazi_inizio=0;             //dalla seconda riga in poi spazi_inizio vale sempre 0
}
document.write("</TABLE>");
}
</script>
</body>
</html>

Nel ciclo for (lista_mesi=0; lista_mesi<=11; lista_mesi++) usato per scrivere le dodici table dei mesi, a ogni table è assegnato un identificatore id_tab= id_tab=lista_mesi+"xxx" che assume successivamente i valori 0xxx, 1xxx, …, 11xxx
che permettono al CSS del BOM
<style>
#id_tab {
position:relative;
top:100px;
left:100px;
color:red
}
</style>
posto tra <head> e </head>, di cambiare aspetto alle tabelle e cambiare la loro posizione,
ma tutte allo stesso modo.

Io vorrei invece dare una posizione diversa alle varie table variando i valori delle proprietà top e left
usando i valori della variabile lista_mesi del ciclo.
Per ottenere questo risultato ho modificato così il codice:

codice:

<!doctype html>
</html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
mesi = new Array(
"Gennaio",
"Febbraio",
"Marzo",
"Aprile",
"Maggio",
"Giugno",
"Luglio",
"Agosto",
"Settembre",
"Ottobre",
"Novembre",
"Dicembre");
giorni_mese = new Array(12);
giorni_mese[0]=31;
giorni_mese[1]=28;
giorni_mese[2]=31;
giorni_mese[3]=30;
giorni_mese[4]=31;
giorni_mese[5]=30;
giorni_mese[6]=31;
giorni_mese[7]=31;
giorni_mese[8]=30;
giorni_mese[9]=31;
giorni_mese[10]=30;
giorni_mese[11]=31;
var lista_mesi
var anno=prompt("Inserisci anno del calendario", " ");
for (lista_mesi=0; lista_mesi<=11; lista_mesi++)
{
var annox=new Date();
annox.setYear(anno);
annox.setMonth(lista_mesi);
annox.setDate(1);
oggi_giorno=annox.getDay();  //il giorno odierno (1 lunedi,2 martedi ecc..., domenica 7)
oggi_mese=annox.getMonth();
oggi_data=annox.getDate();
oggi_anno=annox.getFullYear();
if (((oggi_anno % 4 == 0) && !(oggi_anno % 100 == 0)) || (oggi_anno % 400 == 0)) //verifica se anno bisestile
{
  giorni_mese[1]=29;         //incremento di 1 a febbraio
}
spazi_inizio=oggi_data;     //spazi_inizio contiene il giorno del mese
while (spazi_inizio > 7)    //si tolgono i multipli di 7 dal giorno delmese
{
  spazi_inizio-=7;          
}
spazi_inizio = oggi_giorno - spazi_inizio;  //calcolo giorni da "scartare" ad inizio tabella

codice:

if (spazi_inizio < 0)       //verifica 
{
  spazi_inizio+=7;
}
//stampa tabella contente il calendario 
id_tab=lista_mesi+"xxx"
document.write("<TABLE id=id_tab border=2 >");
//stampa della primariga con mese e anno
document.write("<TR><TD colspan=7><CENTER><B>"+mesi[oggi_mese]+" " +oggi_anno+"</B></CENTER></TD></TR>");
document.write("<TR>");
document.write("<TD align=center>Lun</TD>");
document.write("<TD align=center>Mar</TD>");
document.write("<TD align=center>Mer</TD>");
document.write("<TD align=center>Gio</TD>");
document.write("<TD align=center>Ven</TD>");
document.write("<TD align=center>Sab</TD>");
document.write("<TD align=center>Dom</TD>"); 
document.write("</TR>");
document.write("<TR>");
//stampa colonne vuote a inizio tabella
for (s=0;s<spazi_inizio;s++) 
{
  document.write("<TD> </TD>");
}
i=1;
//stampa celle contenenti i giorni del mese
while (i <= giorni_mese[oggi_mese]) 
{
  //stampa di ogni riga con ciclo  for
  //si usa spazi_inizio per saltare le prime celle vuote se presenti
  //dalla seconda riga b inizia sempre da 0 in quanto
  for (b = spazi_inizio;b<7;b++) 
  {
    document.write("<TD>");
    if (i <= giorni_mese[oggi_mese])  //stampa giorno del mese se mese non è ancora finito
    {
      document.write(i);
    }
    else 
    {
      document.write(" ");
    }
    if (i==oggi_data) 
    {
      document.write("</B></FONT>");
    }
    document.write("</TD>");
    i++;                      //incremento indice di riga
  }
  document.write("</TR>");
  document.write("<TR>");
  spazi_inizio=0;             //dalla seconda riga in poi spazi_inizio vale sempre 0
}
document.write("</TABLE>");
}
for (lista_mesi=0; lista_mesi<=11; lista_mesi++)
{
id_tab=lista_mesi+"xxx"
document.getElementById(id_tab).style.position="relative"
document.getElementById(id_tab).style.left="100px"
document.getElementById(id_tab).style.top="100px"
}
</script>
</body>
</html>

Cioè ho eliminato il CSS del BOM tra <head> e </head> e, alla fine del ciclo che scrive le table dei vari mesi, ho scritto un altro ciclo per richiamarle, usando il DOM, cioè usando document.get ElementById()
for (lista_mesi=0; lista_mesi<=11; lista_mesi++)
{
id_tab=lista_mesi+"xxx"
document.getElementById(id_tab).style.position="re lative"
document.getElementById(id_tab).style.left="100px"
document.getElementById(id_tab).style.top="100px"
document.getElementById(id_tab).style.color="red"
}
ma ora, con il DOM, l’ id_tab di ogni table non viene visto e le varie table dei mesi non vengono né elaborate, né spostate.
Cosa posso fare per rendere l’identificatore id_tab=lista_mesi+”xxx” visibile a document.getElementById() per poter poi posizionare le table a 2 o più colonne? Grazie.

lanvoel

Discussione: ordinare delle table in 2 o più colonne

Strumenti discussione

Ricerca discussione

Visualizza

ordinare delle table in 2 o più colonne

Permessi di invio