Tabella costruita con javascript...responsive

**albertok** · 03-05-2021, 10:35

p.s.

ah mi sono accorto che non ho scritto nulla del file origine dei dati: il file .csv
è strutturato in modo che ogni singolo dato sia:

NomeProgramma|UrlProgramma|datoClasseN

dato ClasseN mi serve per assegnare a ciascun td una clase diversa in modo da potergli assegnare un diverso sfondo.

codice:

dalle,alle,LUNEDI,MARTEDI,MERCOLEDI,GIOVEDI,VENERDI,SABATO,DOMENICA
08:00,09:00,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01,programma01|http://www.google.com|datoClasse01
09:00,10:00,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02,programma02|http://www.amazon.it|datoClasse02
...

**KillerWorm** · 03-05-2021, 22:19

Benissimo, ho già dato uno sguardo e penso si possa apportare tranquillamente la modifica.

Purtroppo, causa impegni lavorativi, non ho molto tempo durante la settimana, inoltre non ho mai usato D3 ma in linea di massima ho dato uno sguardo alla documentazione e ho visto già come poter intervenire.

Questi giorni lo esamino meglio e ti aggiorno prossimamente.

Nel frattempo buon proseguimento con lo studio.

**albertok** · 04-05-2021, 09:06

Originariamente inviata da KillerWorm

Benissimo, ho già dato uno sguardo e penso si possa apportare tranquillamente la modifica.

Purtroppo, causa impegni lavorativi, non ho molto tempo durante la settimana, inoltre non ho mai usato D3 ma in linea di massima ho dato uno sguardo alla documentazione e ho visto già come poter intervenire.

Questi giorni lo esamino meglio e ti aggiorno prossimamente.

Nel frattempo buon proseguimento con lo studio.

Ringrazio per la gentilezza innanzitutto.
Poi magari vorrei chiederti alcune cose di javascript...mi pare tu sia più esperto di me sicuramente :-)

**KillerWorm** · 04-05-2021, 18:59

Ciao, sto giocando un po' con D3 per prendere confidenza prima di proporti qualche possibile soluzione

Poi magari vorrei chiederti alcune cose di javascript...mi pare tu sia più esperto di me sicuramente :-)

In questo caso può essere più opportuno rivolgere la tua richiesta nella relativa sezione JavaScript; se posso, risponderò volentieri; ci sono comunque vari esperti che frequentano questo forum, potrai senz'altro ricevere adeguato aiuto

**KillerWorm** · 04-05-2021, 21:46

Bene, partendo dallo script che hai postato, l'ho rielaborato in modo da ottenere la struttura tabellare che serviva.
Ho rivisto e semplificato anche un po' la logica da te usata per splittare i dati dei programmi.
Qui un esempio di codice completo:

codice HTML:

<!DOCTYPE HTML>
<html lang="it">
  <head>
    <title>Esempio</title>
    <style>
      body {
        text-align: center;
        font-family: sans-serif;
      }

      .rtable {
        display: inline-table;
        border-collapse: collapse;
      }

      .rtable th,
      .rtable td {
        padding: 8px 12px;
        border: 1px solid #000;
      }

      .rtable th {
        color: #fad430;
        background: #0e2071;
      }

      .rtable td:nth-child(-n+2) {
        color: #fbe16b;
        background: #51649c;
      }

      .rtable th:nth-child(3) {
        text-transform: uppercase;
      }

      @media only screen and (min-width: 600px) {
        .rtable {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }

        .rtable tbody {
          margin-bottom: 2px;
          box-shadow: 2px 1px 3px -1px #000;
        }

        .rtable th:last-child,
        .rtable td:last-child {
          border-right: 0;
        }
      }
      
      /* --- datoClasse --- */
      
      .datoClasse01 {background: #8bfbc8}
      .datoClasse02 {background: #7bdf94}
      .datoClasse03 {background: #91f68c}
      .datoClasse04 {background: #d4fb82}
      .datoClasse05 {background: #c2fb8c}
      .datoClasse06 {background: #ccdf7c}
      .datoClasse07 {background: #f3f194}
      .datoClasse08 {background: #dcce7a}
      .datoClasse09 {background: #f7dd89}
      .datoClasse10 {background: #f6d675}
      .datoClasse11 {background: #dab167}
      .datoClasse12 {background: #f0b97e}
      .datoClasse13 {background: #d89065}
      .datoClasse14 {background: #f38e71}
      
    </style>
  </head>
  <body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.7.0/d3.min.js"></script>
    <script>
    
// Inserisco titolo h2 e paragrafo
d3.select("body")
    .append("h2")
    .text("Palinsesto programmi 2021");
d3.select("body")
    .append("p")
    .text("Qui trovate la nostra programmazione settimanale: cliccate sul nome del proogramma per aprire la pagina relativa");

// Leggo i dati dal CSV
d3.csv("Palinsesto.csv").then(function(dati){
    var campi = dati.columns;
    
// Creo la tabella e i 7 tbody, uno per ogni giorno della settimana
    d3.select("body")
        .append("table")
        .attr("id", "tab_palinsesto")
        .classed("rtable", true)
        .selectAll("tbody")
        .data(Array(7))
        .enter()
        .append("tbody")
    ;
    
// Ciclo per i giorni
    for (let giorno=0; giorno<7; giorno++){
    
// Creo le intestazioni per ogni tbody
        let tbody = d3.select("#tab_palinsesto>tbody:nth-child("+(giorno+1)+")");
        
        tbody
            .append("tr")
            .selectAll("th")
            .data([campi[0], campi[1], campi[giorno+2]])
            .enter()
            .append("th")
            .text(d=>d)
        ;
        
// Ciclo per le righe
        for (let riga=0; riga<dati.length; riga++){
            let dalle           = dati[riga][campi[0]]
              , alle            = dati[riga][campi[0]]
              , programma       = dati[riga][campi[giorno+2]].split("|")
              
// Dati aggiuntivi del programma
              , programmaNome   = programma[0]
              , programmaUrl    = programma[1]
              , programmaLink   = "<a href='" + programmaUrl + "' target='blank' \">" + programmaNome + "</a>"
              , datoClasse      = programma[2]
            ;
            
// Aggiungo le righe con i dati
            tbody
                .append("tr")
                .selectAll("td")
                .data([dalle, alle, programmaLink])
                .enter()
                .append("td")
                .classed(datoClasse, true)
                .html(d=>d)
            ;
        }
    }
});

    </script>
  </body>
</html>

Spero non mi sia sfuggito nulla.
Provalo e fai sapere.

Se poi hai bisogno di chiarimenti (più che altro per la parte riguardante il CSS), chiedi pure qui; per il resto ho visto che hai già chiesto in JavaScript.

PS: Tengo a precisare che ho risposto sempre su questa discussione anche per ciò che riguardava esplicitamente la parte JavaScript perché ritengo possa comunque essere utile anche ad altri eventuali utenti, oltre che a te, avere un esempio concreto in riferimento alla soluzione CSS fornita per questo particolare caso, e quindi un possibile modo per poter adeguare l'elaborato esistente così da ottenere il risultato voluto.

**albertok** · 05-05-2021, 09:58

Ti ringrazio... me lo studio per bene e lo provo :-)

Discussione: Tabella costruita con javascript...responsive

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio