Righe di una tabella a comparsa con click

F

Francesco_72

Nuovo Utente
27 Mag 2016
28
2
3
52
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
 
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",
 
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.
 
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>
 
criric ha scritto:
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>
Clicca per allargare...

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
 
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');
 
criric ha scritto:
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');
Clicca per allargare...

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:
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
 
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)
 
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>
 
criric ha scritto:
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>
Clicca per allargare...

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>
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

GraceHawk
ACCESS e VBA: scorrere le righe e le colonne di una tabella?
Risposte
3
Visite
8K
MS Access
marino51
marino51
C
[RISOLTO][PHP] Conteggio righe di una tabella
Risposte
4
Visite
6K
PHP
Coby
C
L
[PHP] selezionare righe di una tabella con le checkbox e cancellarle
Risposte
2
Visite
5K
PHP
Lalli
L
9
eliminare righe di una tabella con form html
Risposte
6
Visite
6K
PHP
91andrea91
9
M
Popolare una tabella con numero righe e colonne prefissate
Risposte
6
Visite
5K
PHP
Madnick
M
G
Intercettare le righe di una tabella taggate con "id"
Risposte
2
Visite
1K
Javascript
giuseppeI
G
G
selezione progressiva delle righe di una tabella
Risposte
11
Visite
3K
Javascript
giuseppeI
G
elpirata
[PHP] Stampare i valori di una variabile scritta su più righe
Risposte
1
Visite
3K
PHP
otto9due
otto9due
F
Miglior metodo per contare le righe di una query
Risposte
2
Visite
3K
MySQL
Fabio Grasso
F
V
[risolto] Aggiungere righe dinamicamente ad una textarea
Risposte
4
Visite
2K
Javascript
Valerio Sparacio
V
A
Scartare righe in una media
Risposte
2
Visite
1K
MySQL
askenez
A
C
Aumentare le dimensioni di una textarea in funzione delle righe presenti.
Risposte
13
Visite
3K
Javascript
cavaliere123
C
D
[ACCESS] Totali su righe e colonne in una query a campi incrociati
Risposte
0
Visite
3K
MS Access
dtomasini
D
E
Tabella righe e colonne
Risposte
0
Visite
733
PHP
Emanuele85
E
Z
Conteggi BOX per ogni 5 righe
Risposte
1
Visite
1K
PHP
marino51
marino51
M
[Photoshop] problema di sfumatura a righe
Risposte
1
Visite
3K
Photoshop
GMdesign
G
gandalf1959
[PHP] Inserimento di più righe non funziona come mi aspetto...
Risposte
2
Visite
1K
PHP
gandalf1959
gandalf1959
I
Allineare due righe di testo in photoshop
Risposte
2
Visite
6K
Photoshop
Iolanda Caponata
I
C
  • Bloccata
[PHP] rimuovere righe duplicate in un array multidimensionale
Risposte
1
Visite
2K
PHP
Max 1
Max 1
gandalf1959
[MySQL] Inserimento multiplo da form multirighe
Risposte
22
Visite
6K
MySQL
gandalf1959
gandalf1959
Alto Basso