Visualizzazione risultati 1 fino 9 di 9

Discussione: Mostrare e nascondere tabelle dinamiche

  1. #1
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito Mostrare e nascondere tabelle dinamiche

    Salve a tutti,

    vi espongo subito il mio dilemma visto che non sono molto pratico di javascript (sempre che questo mia dilemma sia risolvibile con javascript)

    Premessa: ho una pagina in cui esiste una tabella dinamica con dati estratti, attraverso un ciclo while, da un database.

    La tabella ha questa composizione:

    Codice HTML:
    <table>
      <tr id="premi_<?php echo $id; ?>">
        <td> Argomento 1</td>
      </tr>
      <tr id="mostra_<?php echo $id; ?>" style="display:none;">
        <td> Sottoargomento 1.1</td>
        <td> Sottoargomento 1.2</td>
        <td> Sottoargomento 1.3</td>
      </tr>
      <tr id="premi_<?php echo $id; ?>">
        <td> Argomento 2</td>
      </tr>
      <tr id="mostra_<?php echo $id; ?>" style="display:none;">
        <td> Sottoargomento 2.1</td>
      </tr>
      <tr>
        <td id="premi_<?php echo $id; ?>"> Argomento 3</td>
      </tr>
      <tr id="mostra_<?php echo $ida; ?>" style="display:none;">
        <td> Sottoargomento 3.1</td>
        <td> Sottoargomento 3.2</td>
      </tr>
      etc...
    </table>
    La mia richiesta è la seguente: partendo dai tr di tutti i sottoargomenti con display none voglio fare sì che cliccando sul rispettivo argomento superiore i sottoargomenti a lui collegati diventino visibili e al nuovo click ritornino invisibili.

    Credo che la funzione base da cui partire sia questa:

    Codice:
    <script>
    
    	$("premi_<?php echo $id; ?>").click(function(){
    		$("mostra_<?php echo $id; ?>").fadeIn("slow");
    	});
    
    	$("premi_<?php echo $id; ?>").click(function(){
    		$("mostra_<?php echo $id; ?>").fadeOut("slow");
    	});
    
     
    </script>
    Il problema è come posso collegare lo script alla tabella dinamica per fare in modo che se clicco su Argomento 1 mi mostri solo i sottoargomenti a lui collegati?
    Col ciclo while ad ogni tr riesco anche ad assegnare un id unico, però se lo integro nello script sembra non funzionare

  2. #2
    Guest

    Predefinito

    Inserisci il codice javascript che hai postato all'interno di un $(document).ready( e stampa quel codice tramite php con un ciclo while per ogni ID che stampi.

    Se non funziona, prova a mostrare non con il fadeIn ma con il .css("display","block").

    Se non funziona, posta il link della pagina per favore.

  3. #3
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Non posso postare il link della pagina perché è protetta da codici di accesso e non mi sembra il caso di renderli pubblici, ma ti posto tranquillamente le sezioni interessate:

    Per adesso ho messo lo script nell'head, anche se lo includo nel ciclo non mi cambiano i risultati
    Codice HTML:
    <head>
    <script src="../lib/jquery/jquery-1.9.0.min.js"></script>
    <script>
    $(document).ready(
    
    	$("#premi_<?php echo $idfascia; ?>").click(function(){
    		$("#mostra_<?php echo $idfascia; ?>").fadeIn("slow");
    	});
    
    	$("#premi_<?php echo $idfascia; ?>").click(function(){
    		$("#mostra_<?php echo $idfascia; ?>").fadeOut("slow");
    	});
    	); 
    </script>
    </head>
    E questo è tutto il codice della tabella, il resto non credo abbia rilevanza pewr cui lo evito per non allungare il brodo:

    Codice PHP:
    <div id="elenco">
    <table id="spaziotabella" class="titolo" style="width:500px;">
    <tr id="elenco_titolo">
    <th>VISUALIZZA ELENCO ITINERARI</th>
    <th></th>
    </tr>
    <?php

    while ($rowPeriodo=mysql_fetch_array($queryfasciaint)) //popoliamo l'array $row dei valori contenuti nel Db e li cicliamo per visualizzarli
    {
    // convertiamo la data nel database dal formato inglese a quello italiano
    $dalEng=$rowPeriodo['dal'];
    $data1 = explode("-", $dalEng);
    $dalIta = $data1[2]."-".$data1[1]."-".$data1[0];

    $alEng=$rowPeriodo['al'];
    $data2 = explode("-", $alEng);
    $alIta = $data2[2]."-".$data2[1]."-".$data2[0];

    $idfascia=$rowPeriodo['idfascia'];

    $fascia="SELECT lingua FROM fascia WHERE id='$idfascia'";
    $queryfascia=@mysql_query($fascia) or die (mysql_error());
    $rowLingua=mysql_fetch_array($queryfascia);

    $lingua=$rowLingua['lingua'];
    ?>
    <tr class="hover" style="height:40px;">
    <td><? echo "Itinerario ".$lingua." dal ".$dalIta." al ".$alIta.""; ?><br><a href="#" id="premi_<?php echo $idfascia; ?>">Premi </a></td>
    <td>
    <form name="biglietteriaelimina" method="post" action="biglietteria_elenco.php" enctype="multipart/form-data">
    <input type="hidden" name="idfascia" value="<? echo $idfascia; ?>" />
    <input type="hidden" name="action" value="6.1" />
    <input type="submit" value="Elimina Itinerario" />
    </form>
    </td>
    </tr>
    <div id="mostra_<?php echo $idfascia; ?>">
    <tr class="trpercorsi">
    <td colspan="2"></td>
    </tr>
    <?php
    $fasciat
    ="SELECT * FROM fasciat WHERE idfascia='$idfascia' ORDER BY iditinerario, ora ASC";
    $queryfasciat=@mysql_query($fasciat) or die (mysql_error());

    while (
    $rowOrario=mysql_fetch_array($queryfasciat)) //popoliamo l'array $row dei valori contenuti nel Db e li cicliamo per visualizzarli
    {
    $id=$rowOrario['id'];
    $ora=$rowOrario['ora'];
    $iditinerario=$rowOrario['iditinerario'];

    $itinerario="SELECT nome FROM itinerario WHERE id='$iditinerario'";
    $queryitinerario=@mysql_query($itinerario) or die (mysql_error());
    $rowTipologia=mysql_fetch_array($queryitinerario);

    $tipo=$rowTipologia['nome'];

    ?>
    <tr class="trpercorsi hover2" style="display:none;">
    <td><? echo "Percorso delle ".$ora." di tipo ".$tipo.""; ?></td>
    <td>
    <form name="Orarioelimina" method="post" action="biglietteria_elenco.php" enctype="multipart/form-data">
    <input type="hidden" name="id" value="<? echo $id; ?>" />
    <input type="hidden" name="action" value="6.2" />
    <input type="submit" value="Elimina Percorso" />
    </form>
    </td>
    </tr>
    <?php
    }
    ?>
    <tr class="trpercorsi">
    <td colspan="2"></td>
    </tr></div>
    <?php
    }
    ?>
    </table>
    </div>
    Per adesso ho inserito un link (Premi) per testare il tutto, ma vorrei che rendere l'intero rigo cliccabile. A tal proposito ho ripescato la funzione toggle

    Codice HTML:
    $(document).ready(function(){
    $('#premi_<?php echo $idfascia; ?>').css("cursor","pointer").click(function(){//Al click del link .interruttore
      $(this).next().toggle("slow");//seleziona l'elemento che trovi dopo il link cliccato e mostra o nascondi
      return false;//ferma lo script per evitare il reload della pagina
    });
    });
    ma ho gli stessi medesimi risultati

  4. #4
    Guest

    Predefinito

    Il codice javascript deve essere stampato PER OGNI elemento. Quindi anche lui deve stare all'interno di un ciclo while identico a quello che stampa le righe.

  5. #5
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Codice HTML:
    while ($rowPeriodo=mysql_fetch_array($queryfasciaint)) //popoliamo l'array $row dei valori contenuti nel Db e li cicliamo per visualizzarli 
    { 
        // convertiamo la data nel database dal formato inglese a quello italiano 
        $dalEng=$rowPeriodo['dal']; 
        $data1 = explode("-", $dalEng); 
        $dalIta = $data1[2]."-".$data1[1]."-".$data1[0]; 
         
        $alEng=$rowPeriodo['al']; 
        $data2 = explode("-", $alEng); 
        $alIta = $data2[2]."-".$data2[1]."-".$data2[0]; 
    
        $idfascia=$rowPeriodo['idfascia']; 
         
        $fascia="SELECT lingua FROM fascia WHERE id='$idfascia'"; 
        $queryfascia=@mysql_query($fascia) or die (mysql_error()); 
        $rowLingua=mysql_fetch_array($queryfascia); 
         
        $lingua=$rowLingua['lingua']; 
    ?> 
    
    <script src="../lib/jquery/jquery-1.9.0.min.js"></script>
    <script>
    $(document).ready(
    
    	$("#premi_<?php echo $idfascia; ?>").click(function(){
    		$("#mostra_<?php echo $idfascia; ?>").fadeIn("slow");
    	});
    
    	$("#premi_<?php echo $idfascia; ?>").click(function(){
    		$("#mostra_<?php echo $idfascia; ?>").fadeOut("slow");
    	});
    	); 
    </script>
    
        <tr class="hover" style="height:40px;"> 
            <td><? echo "Itinerario ".$lingua." dal ".$dalIta." al ".$alIta.""; ?><br><a href="#" id="premi_<?php echo $idfascia; ?>">Premi </a></td> 
            <td> 
            <form name="biglietteriaelimina" method="post" action="biglietteria_elenco.php" enctype="multipart/form-data"> 
            <input type="hidden" name="idfascia" value="<? echo $idfascia; ?>" /> 
            <input type="hidden" name="action" value="6.1" /> 
            <input type="submit" value="Elimina Itinerario" /> 
            </form> 
            </td> 
        </tr> 
        <div id="mostra_<?php echo $idfascia; ?>"> 
        <tr class="trpercorsi"> 
            <td colspan="2"></td> 
        </tr> 
    <?php 
        $fasciat="SELECT * FROM fasciat WHERE idfascia='$idfascia' ORDER BY iditinerario, ora ASC"; 
        $queryfasciat=@mysql_query($fasciat) or die (mysql_error()); 
    
        while ($rowOrario=mysql_fetch_array($queryfasciat)) //popoliamo l'array $row dei valori contenuti nel Db e li cicliamo per visualizzarli 
        { 
        $id=$rowOrario['id']; 
        $ora=$rowOrario['ora']; 
        $iditinerario=$rowOrario['iditinerario']; 
    
        $itinerario="SELECT nome FROM itinerario WHERE id='$iditinerario'"; 
        $queryitinerario=@mysql_query($itinerario) or die (mysql_error()); 
        $rowTipologia=mysql_fetch_array($queryitinerario); 
    
        $tipo=$rowTipologia['nome']; 
    
    ?> 
        <tr class="trpercorsi hover2" style="display:none;"> 
            <td><? echo "Percorso delle ".$ora." di tipo ".$tipo.""; ?></td> 
            <td> 
            <form name="Orarioelimina" method="post" action="biglietteria_elenco.php" enctype="multipart/form-data"> 
            <input type="hidden" name="id" value="<? echo $id; ?>" /> 
            <input type="hidden" name="action" value="6.2" /> 
            <input type="submit" value="Elimina Percorso" /> 
            </form> 
            </td> 
        </tr> 
    <?php 
        } 
    ?> 
        <tr class="trpercorsi"> 
            <td colspan="2"></td> 
        </tr></div> 
    <?php 
    } 
    ?> 
    Anche inserendolo all'interno del ciclo non funge. I dati sono prelevati correttamente, gli id sono tutti diversi come dovrebbero essere e se provo a lasciare solo "premi_" e "mostra_" ovviamente funziona soltanto il primo livello.

    Anche se cambio fadeIn con display block rimane tutto uguale.

  6. #6
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Citazione Originalmente inviato da zyro Visualizza messaggio
    Salve a tutti,
    ...
    La tabella ha questa composizione:

    Codice HTML:
    <table>
      <tr id="premi_<?php echo $id; ?>">
        <td> Argomento 1</td>
      </tr>
      <tr id="mostra_<?php echo $id; ?>" style="display:none;">
        <td> Sottoargomento 1.1</td>
        <td> Sottoargomento 1.2</td>
        <td> Sottoargomento 1.3</td>
      </tr>
      <tr id="premi_<?php echo $id; ?>">
        <td> Argomento 2</td>
      </tr>
      <tr id="mostra_<?php echo $id; ?>" style="display:none;">
        <td> Sottoargomento 2.1</td>
      </tr>
      <tr>
        <td id="premi_<?php echo $id; ?>"> Argomento 3</td>
      </tr>
      <tr id="mostra_<?php echo $ida; ?>" style="display:none;">
        <td> Sottoargomento 3.1</td>
        <td> Sottoargomento 3.2</td>
      </tr>
      etc...
    </table>
    La mia richiesta è la seguente: partendo dai tr di tutti i sottoargomenti con display none voglio fare sì che cliccando sul rispettivo argomento superiore i sottoargomenti a lui collegati diventino visibili e al nuovo click ritornino invisibili.

    Credo che la funzione base da cui partire sia questa:

    Codice:
    <script>
    
    	$("premi_<?php echo $id; ?>").click(function(){
    		$("mostra_<?php echo $id; ?>").fadeIn("slow");
    	});
    
    	$("premi_<?php echo $id; ?>").click(function(){
    		$("mostra_<?php echo $id; ?>").fadeOut("slow");
    	});
    
     
    </script>
    Il problema è come posso collegare lo script alla tabella dinamica per fare in modo che se clicco su Argomento 1 mi mostri solo i sottoargomenti a lui collegati?
    Col ciclo while ad ogni tr riesco anche ad assegnare un id unico, però se lo integro nello script sembra non funzionare
    con jQuery :
    Codice:
    $("#premi_xx").click(function(){
      $("#mostra_xx").toggle();
    });
    dove xx è ID del TR ,
    ..altrimenti puoi associare al TR parent un onclick che chiami la funzione a cui passi ID dei children:
    Codice:
    function ShowHide(id){
     $(id).toggle();
    }
    Codice:
    <tr id="premi_<?php echo $id; ?> onclick="ShowHide('mostra_<?php echo $id; ?>')">

  7. #7
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Ciao a tutti, scusate l'assenza ma sono stato via qualche giorno.

    Grazie a entrambi per l'aiuto, ho provato la soluzione col toggle proposta da NLSweb, ma ho dovuto modificarla in un modo strano per farla funzionare. Ho sfruttato un bieco trucchetto ma che mi da soddisfazione, per qualche motivo se incorporo il php nello script non funziona più ma ho usato la proprietà next con un piccolo trucchetto per far funzionare tutto


    Tabella su cui lavorare (che si forma attraverso il ciclo while dal DB):
    Codice HTML:
    <table>
      <tr id="premi_<?php echo $id; ?>" class="hover">
        <td> Argomento 1</td>
      </tr>
      <tr id="mostra_<?php echo $id; ?>" class="hover2" style="display:none;">
        <div>
        <div> Sottoargomento 1.1</div>
        <div> Sottoargomento 1.2</div>
        <div> Sottoargomento 1.3</div>
        </div>
      </tr>
      etc...
    </table>
    E questo è lo script che fa funzionare il tutto:

    Codice HTML:
    	<script>
    		/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */
    		$(document).ready(function(){
    		$('.hover').css("cursor","pointer").click(function(){//Al click del link .interruttore
    		  $(this).next().toggle("slow");//seleziona l'elemento che trovi dopo il link cliccato e mostra o nascondi
    		  return false;//ferma lo script per evitare il reload della pagina
    		});
    		});
    	</script>
    Se mi volete chiedere perché ho dovuto inserire quei div all'interno del td il motivo tanto semplice quanto strano.
    Se lasciavo la tabella come era in origine lo script funzionava ma mi faceva comparire e scomparire solo il primo Ssottoargomento di ogni tr, davvero strano, mentre così ha effetto sul div generale che poi contiene a sua volta gli altri div (con cui simulo i td col css).

    Sinceramente quel genere di comportamento, cioè fungere solo col primo td lo trovo strano, se qualcuno sa il perché funziona così e me lo volesse dire mi farebbe un gran piacere, sono sempre curioso di scoprire i motivi di certi comportamenti.

    Comunque vi ringrazio ancora, col vostro aiuto sono riuscito ad arrivare pian piano a una soluzione, thanks.

  8. #8
    NLSweb non è connesso Altervistiano Junior
    Data registrazione
    17-01-2014
    Messaggi
    658

    Predefinito

    Non capisco bene quale problema tu abbia avuto , comunque mi fa piacere sapere che sei riuscito a risolvere ugualmente..

    per scrupolo ho realizzato questo esempio di come sarebbe stato applicando il codice da me suggerito.

    in questo esempio ho generato una piccola tabella con php a cui ho assegnato un ID "manuale" , presumo che nel tuo caso la tabella e ID siano generati da dati prelevati da un DB
    ad ogni TH della tabella ho assegno un onclick che chiama la funzione toggle a cui passo come argomento ID della riga dei sotto argomenti.

    all'apertura del documento ho inserito un ciclio for per nascondere i sotto argomenti , se preveli i dati da un DB dovrai passare il numero di ID generati ad una funzione che esegue il ciclo di for.

    Codice PHP:
    <!DOCTYPE html>
    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    for(i=0;i<3;i++){
    var riga = "#"+i;
    $(riga).toggle();
    }
    });

    function TogglE(id){
    var riga = "#"+id;
    $(riga).toggle();
    }

    </script>
    <style>
    #tabella{
    width:500px;
    position:relative;
    top:50px;left:100px;
    box-shadow:0px 0px 5px black;
    padding:20px;
    }
    #tabella th{
    font-family:Arial, sans-serif;
    font-size:100%;
    color:white;
    border:1px solid red;
    background:red;
    cursor:pointer;
    padding:5px;
    }
    #tabella th:hover{
    background:cyan;
    color:black;
    }
    #tabella td{
    display:list-item;
    list-style-type:none;
    font-family:Arial, sans-serif;
    font-size:100%;
    border:1px solid red;
    background:orange;
    color:black;
    text-align:center;
    cursor:pointer;
    padding:5px;
    }
    #tabella td:hover{
    background:yellow;
    }
    </style>
    </head>
    <body>

    <?php
    $id
    = 0;

    echo
    "<table id=\"tabella\">";

    echo
    "<th onclick=\"TogglE(".$id.")\"> Argomento 1</th>";
    echo
    "<tr id=".$id.">";
    echo
    "<td> Sottoargomento 1.1</td>";
    echo
    "<td> Sottoargomento 1.2</td>";
    echo
    "<td> Sottoargomento 1.3</td>";
    echo
    "</tr>";

    $id++;

    echo
    "<th onclick=\"TogglE(".$id.")\"> Argomento 2</th>";
    echo
    "<tr id=".$id.">";
    echo
    "<td> Sottoargomento 2.1</td>";
    echo
    "</tr>";

    $id++;

    echo
    "<th onclick=\"TogglE(".$id.")\">Argomento 3</th>";
    echo
    "<tr id=".$id.">";
    echo
    "<td> Sottoargomento 3.1</td>";
    echo
    "<td> Sottoargomento 3.2</td>";
    echo
    "</tr>";

    echo
    "</table>";
    ?>
    </body>
    </html>

  9. #9
    zyro non è connesso Utente
    Data registrazione
    08-05-2010
    Messaggi
    105

    Predefinito

    Non capisco bene quale problema tu abbia avuto , comunque mi fa piacere sapere che sei riuscito a risolvere ugualmente..
    Lo script di per se funzionava bene se inserivo dei riferimenti manuali, semplicemente col codice php integrato smetteva di funzionare oppure funzionava ma solo per la prima riga successiva.

    in questo esempio ho generato una piccola tabella con php a cui ho assegnato un ID "manuale" , presumo che nel tuo caso la tabella e ID siano generati da dati prelevati da un DB
    Esattamente, per la precisione da diverse tabelle (5) di un database.

    Forse, vedendo il tuo codice, il motivo per cui non mi funzionava è perché non ho incluso la libreria ajax. Per quel che mi serve ho risolto i miei problemi e posso consegnare tutto il materiale, ma farò una prova in un'altra pagina per vedere se funziona

Regole di scrittura

  • Non puoi creare nuove discussioni
  • Non puoi rispondere ai messaggi
  • Non puoi inserire allegati.
  • Non puoi modificare i tuoi messaggi
  •