Righe di una tabella a comparsa con click

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
Buongiorno a tutti, io ho questo problema:

Ho una tabella creata con un ciclo PHP che mostra un determinato numero di gruppi e il materiale totale loro assegnato. Ora vorrei che cliccando sul gruppo, subito sotto di lui comparissero ulteriori righe che mostrano nel dettaglio gli uffici a cui è stato dato quel materiale specifico (ES: GRUPPO A = 20 ---> Sez. 1 = 10, Sez 2 = 10). Con il seguente codice javascript sono riuscito a fare una cosa del genere tramite i <DIV>

Codice:
<head>
    <title>Untitled</title>

<script type="text/javascript" language="javascript">
function visualizza(id){
  if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
  }
}
</script>
</head>

<body>
<?php
$query=mysqli_query($conn, "SELECT * FROM gruppi");
$data=1;
while ($dato = mysqli_fetch_assoc($query))
    {
        $num_gruppo=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=5 AND ID_gruppo=$dato[ID_gruppo]"));
        echo"<div><a href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo] MATERIALE $num_gruppo</a></div>
        <div id=\"immagine$data\" style=\"display:none\">";
        $query2=mysqli_query($conn, "SELECT * FROM sezioni WHERE ID_gruppo=$dato[ID_gruppo]");
        while ($sez = mysqli_fetch_assoc($query2))
            {
                $num_sezione=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=5 AND ID_sezione=$sez[ID_sezione]"));
                echo"<div><a>$sez[nome_sezione] MATERIALE $num_sezione</a></div>";
            }
        echo"</div>";
        $data++;
    }


?>

ma non riesco ad adattarlo per utilizzare una tabella... in pratica ogni riga che deve comparire o scomparire con il click si compone di due celle dove vengono inserite le voci interessate (nome sezione e quantità). L'unica soluzione che ho trovato è la seguente ma "bleffa" in quanto usa una sola riga e una sola cella (il <BR> permette di disporre i dati su più righe:

Codice:
<head>
    <title>Untitled</title>


<script type="text/javascript" language="javascript">
function visualizza(id){
  if (document.getElementById){
    if(document.getElementById(id).style.display == 'none'){
      document.getElementById(id).style.display = 'block';
    }else{
      document.getElementById(id).style.display = 'none';
    }
  }
}
</script>


</head>


<body>
<?php
$query=mysqli_query($conn, "SELECT * FROM gruppi");
$data=1;
echo"<table align='center' width='600'>";
while ($dato = mysqli_fetch_assoc($query))
    {
        $num_gruppo=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=5 AND ID_gruppo=$dato[ID_gruppo]"));
        echo"<tr><td><a href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo] MATERIALE $num_gruppo</a></td></tr>";
        echo"<tr id=\"immagine$data\" name=\"immagine$data\" style=\"display:none\"><td>";
        $query2=mysqli_query($conn, "SELECT * FROM sezioni WHERE ID_gruppo=$dato[ID_gruppo]");
        while ($sez = mysqli_fetch_assoc($query2))
            {
                $num_sezione=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=5 AND ID_sezione=$sez[ID_sezione]"));
                echo"$sez[nome_sezione] MATERIALE $num_sezione<br>";
            }
        echo"</td></tr>";
        $data++;
    }

?>
</table>

</body>

Qualcuno riesce gentilmente ad aiutarmi?

Grazie in anticipo
 

marino51

Utente Attivo
28 Feb 2013
3.203
207
63
Lombardia
visto che hai aperto la discussione su altri forum, correttezza vuole che anche qui avverti di aver risolto il problema, da te, con il metodo "elusivo",
 

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
Chiedo scusa se non avvertito, ma il fatto è che io ho risolto in un modo "elusivo" e quindi non risolvendo il problema ma aggirandolo. In pratica la mia domanda resta ancora attiva e sarei grado se qualcuno riuscisse a darmi la soluzione corretta.

Cmq la mia "elusione" consiste nel creare una tabella nella tabella, quindi ho riadattato il primo codice dicendogli di far apparire/scomparire una seconda tabella all'interno della prima... è ovvio che questa non può essere la soluzione ottimale in quanto la soluzione corretta è far apparire/sparire semplicemente le righe della prima tabella senza crearne una seconda.
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
A me sembra corretto, dovresti generare una tabella simile a questa che funziona , qual'è il problema ?
HTML:
<html>
    <head>
        <script>
            function visualizza(id) {
                if (document.getElementById) {
                    if (document.getElementById(id).style.display == 'none') {
                        document.getElementById(id).style.display = 'block';
                    } else {
                        document.getElementById(id).style.display = 'none';
                    }
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td><a href="javascript:visualizza('tr1')">Mostra/nascondi</a></td>
                <td></td>
            </tr>
            <tr id="tr1" style="display: none;">
                <td>riga </td>
                <td>nascosta</td>
            </tr>
        </table>       
    </body>
</html>
 

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
A me sembra corretto, dovresti generare una tabella simile a questa che funziona , qual'è il problema ?
HTML:
<html>
    <head>
        <script>
            function visualizza(id) {
                if (document.getElementById) {
                    if (document.getElementById(id).style.display == 'none') {
                        document.getElementById(id).style.display = 'block';
                    } else {
                        document.getElementById(id).style.display = 'none';
                    }
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td><a href="javascript:visualizza('tr1')">Mostra/nascondi</a></td>
                <td></td>
            </tr>
            <tr id="tr1" style="display: none;">
                <td>riga </td>
                <td>nascosta</td>
            </tr>
        </table>      
    </body>
</html>

Scusami se ti rispondo solo ora ma non sono stato in ufficio. Grazie per la risposta.

Questa tua soluzione l'avevo provata anche io ma il problema sta nel fatto che le righe che appaiono o scompaiono sono create dinamicamente. Quindi può essere una come possono essere cinque. L'ID della riga, quindi, verrebbe duplicato e il javascript non funzionerebbe in quanto l'ID richiamato deve essere univoco
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
ma l'id viene creato dinamicamente, nel tuo codice la variabile $data si incrementa ad ogni iterazione
PHP:
echo"<tr id=\"immagine$data\"
e anche l'onclick è corretto
PHP:
onclick=\"visualizza('immagine$data');
 

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
ma l'id viene creato dinamicamente, nel tuo codice la variabile $data si incrementa ad ogni iterazione
PHP:
echo"<tr id=\"immagine$data\"
e anche l'onclick è corretto
PHP:
onclick=\"visualizza('immagine$data');

Però l'id dinamico che scaturisce da $data riguarda esclusivamente il gruppo principale (la riga da cliccare per intenderci).

Io lo posso utilizzare esclusivamente per far apparire un unico "blocco" sotto lo stesso gruppo. Quindi se assegno quell'id alle righe che vengono create dinamicamente, nel momento che sono due o più succede che o mi fa vedere solo la prima o addirittura nessuna (ora non ricordo bene quale delle due soluzioni mi rilascia). Ecco perché ho optato per identificare quel blocco con un'altra tabella. Quindi ho dato l'id alla tabella inclusa e le righe al suo interno vengono create con il ciclo.

Io non conosco javascript ma leggendo ho visto che tra i vari oggetti che si possono utilizzare con style.display esiste anche table-row o table-row-group... Per questo chiedevo se era possibile arrivare allo stesso risultato senza creare una seconda tabella
 
Ultima modifica:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
javascript serve a poco qui, mostra e nasconde la riga non fa altro
le tr che genera il php sono 2, la prima è quella che clicchi la seconda è quella nascosta
PHP:
echo"<tr><td><a href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo] MATERIALE $num_gruppo</a></td></tr>";
        echo"<tr id=\"immagine$data\" name=\"immagine$data\" style=\"display:none\"><td>";
è la seconda che prende l'id dinamico quindi qualsiasi riga tu clicchi javasctript ti mostra quella sucessiva.
Ripeto, non vedo il problema, la teoria è corretta.
Al massimo postami il dump della tabella mysql con un paio di record che testo il codice
 

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
In realtà, per semplificare, le tabelle di interesse sono 2:
GRUPPI: ID_gruppo (key) - nome_gruppo
SEZIONI: ID_sezione (key) - ID_gruppo - nome_sezione

ovviamente ad un gruppo corrispondono più sezioni collegate tramite ID_gruppo. Cliccando sul gruppo devono comparire tante righe quante sono le sezioni (l'elenco lo sviluppa il ciclo ovviamente)
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
a me funziona, qui l'esempio online e di seguito il codice che ho utilizzato ho solo eliminato la query che fai nella tabella materiale
PHP:
<head>
    <title>Untitled</title>
    <script type="text/javascript" language="javascript">
        function visualizza(id) {
            if (document.getElementById) {
                if (document.getElementById(id).style.display == 'none') {
                    document.getElementById(id).style.display = 'block';
                } else {
                    document.getElementById(id).style.display = 'none';
                }
            }
        }
    </script>
</head>
<body>
    <?php
    $conn = mysqli_connect("localhost", "username", "password", "database");
    $query = mysqli_query($conn, "SELECT * FROM gruppi");
    $data = 1;
    echo"<table align='center' width='600'>";
    while ($dato = mysqli_fetch_assoc($query)) {
        echo"<tr><td><a href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo] MATERIALE </a></td></tr>";
        echo"<tr id=\"immagine$data\" name=\"immagine$data\" style=\"display:none\"><td>";
        $query2 = mysqli_query($conn, "SELECT * FROM sezioni WHERE ID_gruppo=$dato[ID_gruppo]");
        while ($sez = mysqli_fetch_assoc($query2)) {
            echo"$sez[nome_sezione]<br>";
        }
        echo"</td></tr>";
        $data++;
    }
    ?>
</table>

</body>
 

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
51
a me funziona, qui l'esempio online e di seguito il codice che ho utilizzato ho solo eliminato la query che fai nella tabella materiale
PHP:
<head>
    <title>Untitled</title>
    <script type="text/javascript" language="javascript">
        function visualizza(id) {
            if (document.getElementById) {
                if (document.getElementById(id).style.display == 'none') {
                    document.getElementById(id).style.display = 'block';
                } else {
                    document.getElementById(id).style.display = 'none';
                }
            }
        }
    </script>
</head>
<body>
    <?php
    $conn = mysqli_connect("localhost", "username", "password", "database");
    $query = mysqli_query($conn, "SELECT * FROM gruppi");
    $data = 1;
    echo"<table align='center' width='600'>";
    while ($dato = mysqli_fetch_assoc($query)) {
        echo"<tr><td><a href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo] MATERIALE </a></td></tr>";
        echo"<tr id=\"immagine$data\" name=\"immagine$data\" style=\"display:none\"><td>";
        $query2 = mysqli_query($conn, "SELECT * FROM sezioni WHERE ID_gruppo=$dato[ID_gruppo]");
        while ($sez = mysqli_fetch_assoc($query2)) {
            echo"$sez[nome_sezione]<br>";
        }
        echo"</td></tr>";
        $data++;
    }
    ?>
</table>

</body>

Non avevo avuto il tempo di analizzarla attentamente questo weekend ma la tua soluzione è la stessa alla quale all'inizio ero giunto io... il problema è che non crea tante righe quante sono le sezioni presenti ma crea una riga sola e le sezioni vengono elencate dando un "a capo" ogni volta... io alla fine ho risolto in questo modo (tralascio la head sempre uguale)

Codice:
<table align="center" bgcolor='orange'>
    <tr bgcolor="#330000" align="center" style="color: white;"><td height="50" width="400">ARTICOLAZIONE</td><td width="100">MATERIALE IN CARICO</td></tr>
    <?php
    while ($dato = mysqli_fetch_assoc($query))
    {
        $num_gruppo=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=$genere AND ID_gruppo=$dato[ID_gruppo]"));
        echo"<tr align='center'><td width='400' bgcolor='orange'><a style=\"text-decoration: none; color: black\" href=\"#\" onclick=\"visualizza('immagine$data'); return false\">$dato[nome_gruppo]</a></td><td width='100'>$num_gruppo</td></tr>";
        echo"<tr><td align='center' colspan=2 ><table cellpadding='2' cellspacing='0' id=\"immagine$data\" style=\"display:none\">";
        $query2=mysqli_query($conn, "SELECT * FROM sezioni WHERE ID_gruppo=$dato[ID_gruppo]");
        while ($sez = mysqli_fetch_assoc($query2))
            {
                echo"<tr bgcolor='yellow' align='center'><td width='400'>";
                $num_sezione=mysqli_num_rows(mysqli_query($conn_mobilia, "SELECT * FROM materiale WHERE ID_genere=$genere AND ID_sezione=$sez[ID_sezione]"));
                echo"$sez[nome_sezione] </td><td width='100'>$num_sezione";
                echo"</td></tr>";
            }
        echo"</table></td></tr>";
        $data++;
    }
    }
?>
  
</table>
 
Discussioni simili
Autore Titolo Forum Risposte Data
GraceHawk ACCESS e VBA: scorrere le righe e le colonne di una tabella? MS Access 3
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
L [PHP] selezionare righe di una tabella con le checkbox e cancellarle PHP 2
9 eliminare righe di una tabella con form html PHP 6
M Popolare una tabella con numero righe e colonne prefissate PHP 6
G Intercettare le righe di una tabella taggate con "id" Javascript 2
G selezione progressiva delle righe di una tabella Javascript 11
elpirata [PHP] Stampare i valori di una variabile scritta su più righe PHP 1
F Miglior metodo per contare le righe di una query MySQL 2
V [risolto] Aggiungere righe dinamicamente ad una textarea Javascript 4
A Scartare righe in una media MySQL 2
C Aumentare le dimensioni di una textarea in funzione delle righe presenti. Javascript 13
D [ACCESS] Totali su righe e colonne in una query a campi incrociati MS Access 0
E Tabella righe e colonne PHP 0
Z Conteggi BOX per ogni 5 righe PHP 1
M [Photoshop] problema di sfumatura a righe Photoshop 1
gandalf1959 [PHP] Inserimento di più righe non funziona come mi aspetto... PHP 2
I Allineare due righe di testo in photoshop Photoshop 2
C [PHP] rimuovere righe duplicate in un array multidimensionale PHP 1
A [PHP] Visualizzazione righe (a capo) file .txt PHP 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
fabryx [PHP]RISOLTO: Trasformare righe in colonne assegnando singole variabili PHP 10
asevenx [Javascript] aggiungere righe con select da database e calcolo sconto in automatico Javascript 0
A Cancellare righe vuote in mysql Database 4
M Lists li su 2 righe HTML e CSS 1
C Colorare righe tabella tramite condizione Java 5
T php e mysql - visualizzare righe in colonna PHP 4
T Righe in colonna MySQL 1
P problema: righe verticali HTML e CSS 10
neo996sps [PHP + MySQL] Tabella 5 colonne per N righe con un record per cella PHP 3
F Contare le righe con php ad oggetti MySQL 0
asevenx Contare numero di righe in un form dinamico Javascript 5
D salvare righe dinamicamente PHP 3
P Tabella Dinamica in javascript (aggiungere righe con textinput) Javascript 1
L Tabella a righe alternate PHP 4
E messaggio di conferma dopo inserimento/modifica/cancellazione righe db PHP 10
F Due righe da fricfrac Presentati al Forum 1
max_400 Cancellare le prime 3 righe di un file PHP 4
JackIlPazzo Inserire array in più righe PHP 9
A individuazione righe e colonne XML 0
IImanuII Cancellare righe doppie e ciclo. PHP 2
elpirata Creazione dinamica righe form Javascript 1
elpirata Generazione dinamica righe form con php PHP 2
K spegazione su queste righe di codice PHP 2
Shyson Stampa ne DB moltissime righe MySQL 0
G Form con aggiunta righe PHP 3
C Sostituire molte righe di codice PHP 2
D Funzionalità gps righe comando urgente Sviluppo app per Android 1
P [RISOLTO]Lettura e scrittura su righe e colonne excel tramite PHP... PHP 3
voldemort Commenti in HTML su più righe: è possibile? HTML e CSS 1

Discussioni simili