Visualizzazione dei risultati da 1 a 7 su 7

Discussione: Aggiunta TR dinamico

  1. #1
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,675

    Aggiunta TR dinamico

    Ciao a tutti io ho la seguente pagina<br><img src="https://forum.html.it/forum/attachment.php?attachmentid=29762&amp;stc=1" attachmentid="29762" alt="" id="vbattach_29762" class="previewthumb"><br>, e al click dell'img vicino al valore&nbsp;<table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ ctl02_GridViewResponsabile" style="color: rgb(0, 0, 0); font-family: &quot;Times New Roman&quot;; font-size: medium; border-width: 0px; border-collapse: collapse;" width=""><tbody><tr><td style="border-width: 0px;">47</td><td style="border-width: 0px;">PAOLOTTO PAOLINO dovrebbe aprirsi un'altro TR come accade quando clicco sul 63.<br></td></tr></tbody></table><br>Questo non accade ma se clicco su 63 e poi lo riapro il TR si vede. Di seguito il codice<br><br>
    codice HTML:
    <!DOCTYPE html>
    <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>zzzzzzz</title><script src="jquery.min.js"></script></head><body class="widescreen fixed-left-void"><form method="post" id="aspnetForm"><div class="content-page"><!-- Start content --><div class="content"><div class="container"><!-- Page-Title --><div class="row"><div class="col-sm-12"><div class="card-box"><div class="row"><div class="col-md-12"><div id="ctl00_ContentPlaceHolderBody_PanelDatasOK"><div><table class="table  mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare" style="border-width:0px;border-collapse:collapse;"><tr style="border-color:DarkGray;border-width:1px;border-style:solid;"><th scope="col">&nbsp;</th><th scope="col" style="border-width:0px;">Id</th><th scope="col" style="border-width:0px;">Anagrafica Titolare</th><th scope="col" style="border-width:0px;">Unione</th></tr><tr><td style="width:20px;"><a href="JavaScript:divexpandcollapse('divT63');"><img alt="Details" id="imgdivT63" src="images/asc.gif" /></a><div id="divT63" style="display: none;"><div><h3>Responsabili incaricati dal titolare</h3></div><!-- RESPONSABILE--><div><table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile" style="border-width:0px;border-collapse:collapse;"><tr style="border-color:DarkGray;border-width:1px;border-style:solid;"><th scope="col">&nbsp;</th><th scope="col" style="border-width:0px;">Id</th><th scope="col" style="border-width:0px;">Anagrafica Responsabili</th><th scope="col" style="border-width:0px;">Nominato da</th><th scope="col" style="border-width:0px;">Facoltà Nomina Sub-Responsabili</th><th scope="col" style="border-width:0px;">Unione</th>
    </tr><tr><td style="width:20px;"><a href="JavaScript:divexpandcollapseR('divR47');"><img alt="Details" id="imgdivR47" src="images/asc.gif" /></a><div id="divR47" style="display: none;"><h4>Responsabili incaricati dal Responsabile</h4></div></td><td style="border-width:0px;">47</td><td style="border-width:0px;">PAOLOTTO PAOLINO</td><td style="border-width:0px;">Titolare</td><td style="border-width:0px;">Ricorso ad altro responsabile non ammesso</td><td style="border-width:0px;"><label class="custom-control custom-checkbox"><input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$GridViewResponsabile$ctl02$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile_ctl02_CheckBox1" class="custom-control-input hidden" disabled="disabled" /><span class="custom-control-indicator"></span></label></td>
    </tr><tr style="border-color:LightGrey;border-width:1px;border-style:solid;"><td style="width:20px;"><a href="JavaScript:divexpandcollapseR('divR68');"><img alt="Details" id="imgdivR68" src="images/asc.gif" /></a><div id="divR68" style="display: none;"><h4>Responsabili incaricati dal Responsabile</h4></div></td><td style="border-width:0px;">68</td><td style="border-width:0px;">Giovanni Borgia</td><td style="border-width:0px;">Titolare</td><td style="border-width:0px;">Autorizzazione generale</td><td style="border-width:0px;"><label class="custom-control custom-checkbox"><input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$GridViewResponsabile$ctl03$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile_ctl03_CheckBox1" class="custom-control-input hidden" disabled="disabled" /><span class="custom-control-indicator"></span></label></td>
    </tr></table></div><!-- FINE RESPONSABILE--><div><h3>DPO incaricati dal titolare</h3></div><!-- DPO --><div><table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewDPO" style="border-width:0px;border-collapse:collapse;"><tr style="border-color:DarkGray;border-width:1px;border-style:solid;"><th scope="col" style="border-width:0px;">Anagrafica DPO</th><th scope="col" style="border-width:0px;">Documento di Nomina</th><th scope="col" style="border-width:0px;">Data Nomina</th></tr><tr><td style="border-width:0px;">Rita Allevi</td><td style="border-width:0px;">1</td><td style="border-width:0px;">04/12/2018 00:00:00</td></tr></table></div><!-- FINE DPO --><div><h3>Soggetti Autorizzati incaricati dal titolare</h3></div><!-- SOGGETTI AUTORIZZATI --><div><table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewSA" style="border-width:0px;border-collapse:collapse;"><tr style="border-color:DarkGray;border-width:1px;border-style:solid;"><th scope="col" style="border-width:0px;">Anagrafica DPO</th><th scope="col" style="border-width:0px;">Nominato Da</th><th scope="col" style="border-width:0px;">Tipo Incarico</th></tr><tr><td style="border-width:0px;">Giovanni Borgia</td><td style="border-width:0px;">Titolare</td><td style="border-width:0px;">Amministratore di Sistema</td></tr></table></div><!-- FINE SOGGETTI AUTORIZZATI --></div></td><td style="border-width:0px;">63</td><td style="border-width:0px;">PAOLOTTO PAOLINO</td><td style="border-width:0px;"><label class="custom-control custom-checkbox"><input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_CheckBox1" class="custom-control-input hidden" disabled="disabled" /><span class="custom-control-indicator"></span></label></td>
    </tr></table></div></div></div></div></div></div></div></div><!-- container --></div></div></form><!-- jQuery --><script src="bootstrap.min.js"></script><script>function divexpandcollapse(divname) {var img = "img" + divname;if ($("#" + img).attr("src") == "images/asc.gif") {$("#" + img).closest("tr").after("<tr><td></td><td colspan ='100%' > " + $("#" + divname).html() + "</td></tr>")$("#" + img).attr("src", "images/desc.gif");} else {$("#" + img).closest("tr").next().remove();$("#" + img).attr("src", "images/asc.gif");}}
    function divexpandcollapseR(divname) {var img = "img" + divname;if ($("#" + img).attr("src") == "images/asc.gif") {$("#" + img).closest("tr").after("<tr><td></td><td colspan ='100%' > " + $("#" + divname).html() + "</td></tr>")$("#" + img).attr("src", "images/desc.gif");} else {$("#" + img).closest("tr").next().remove();$("#" + img).attr("src", "images/asc.gif");}}</script></body></html>
    <br>
    Immagini allegate Immagini allegate

  2. #2
    Moderatore di XHTML e HTML L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    18,985
    ciao,
    indenta il codice in maniera comprensibile e noi umani, e usa sempre il tag CODE. grazie

  3. #3
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,675
    Ops scusa mi aveva dato un'anteprima migliore

    codice:
    <table class="table  mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare" style="border-width:0px;border-collapse:collapse;">
    <tr style="border-color:DarkGray;border-width:1px;border-style:solid;">
    <th scope="col">&nbsp;</th>
    <th scope="col" style="border-width:0px;">Id</th>
    <th scope="col" style="border-width:0px;">Anagrafica Titolare</th>
    <th scope="col" style="border-width:0px;">Unione</th>
    </tr>
    <tr>
    <td style="width:20px;">
    <a href="JavaScript:divexpandcollapse('divT63');">
    <img alt="Details" id="imgdivT63" src="images/asc.gif" />
    </a>
    <div id="divT63" style="display: none;">
    <div>
    <h3>Responsabili incaricati dal titolare</h3>
    </div>
    <!-- RESPONSABILE-->
    <div>
    <table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile" style="border-width:0px;border-collapse:collapse;">
    <tr style="border-color:DarkGray;border-width:1px;border-style:solid;">
    <th scope="col">&nbsp;</th>
    <th scope="col" style="border-width:0px;">Id</th>
    <th scope="col" style="border-width:0px;">Anagrafica Responsabili</th>
    <th scope="col" style="border-width:0px;">Nominato da</th>
    <th scope="col" style="border-width:0px;">Facoltà Nomina Sub-Responsabili</th>
    <th scope="col" style="border-width:0px;">Unione</th>
    
    
    </tr>
    <tr>
    <td style="width:20px;">
    <a href="JavaScript:divexpandcollapseR('divR47');">
    <img alt="Details" id="imgdivR47" src="images/asc.gif" />
    </a>
    <div id="divR47" style="display: none;">
    <h4>Responsabili incaricati dal Responsabile</h4>
    </div>
    </td>
    <td style="border-width:0px;">47</td>
    <td style="border-width:0px;">
    PAOLOTTO PAOLINO
    </td>
    <td style="border-width:0px;">
    Titolare
    </td>
    <td style="border-width:0px;">
    Ricorso ad altro responsabile non ammesso
    </td>
    <td style="border-width:0px;">
    <label class="custom-control custom-checkbox">
    <input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$GridViewResponsabile$ctl02$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile_ctl02_CheckBox1" class="custom-control-input hidden" disabled="disabled" />
    <span class="custom-control-indicator"></span>
    </label>
    </td>
    
    
    </tr>
    <tr style="border-color:LightGrey;border-width:1px;border-style:solid;">
    <td style="width:20px;">
    <a href="JavaScript:divexpandcollapseR('divR68');">
    <img alt="Details" id="imgdivR68" src="images/asc.gif" />
    </a>
    <div id="divR68" style="display: none;">
    <h4>Responsabili incaricati dal Responsabile</h4>
    </div>
    </td>
    <td style="border-width:0px;">68</td>
    <td style="border-width:0px;">
    Giovanni Borgia
    </td>
    <td style="border-width:0px;">
    Titolare
    </td>
    <td style="border-width:0px;">
    Autorizzazione generale
    </td>
    <td style="border-width:0px;">
    <label class="custom-control custom-checkbox">
    <input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$GridViewResponsabile$ctl03$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewResponsabile_ctl03_CheckBox1" class="custom-control-input hidden" disabled="disabled" />
    <span class="custom-control-indicator"></span>
    </label>
    </td>
    
    
    </tr>
    </table>
    </div>
    <!-- FINE RESPONSABILE-->
    <div>
    <h3>DPO incaricati dal titolare</h3>
    </div>
    <!-- DPO -->
    <div>
    <table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewDPO" style="border-width:0px;border-collapse:collapse;">
    <tr style="border-color:DarkGray;border-width:1px;border-style:solid;">
    <th scope="col" style="border-width:0px;">Anagrafica DPO</th>
    <th scope="col" style="border-width:0px;">Documento di Nomina</th>
    <th scope="col" style="border-width:0px;">Data Nomina</th>
    </tr>
    <tr>
    <td style="border-width:0px;">
    Rita Allevi
    </td>
    <td style="border-width:0px;">
    1
    </td>
    <td style="border-width:0px;">
    04/12/2018 00:00:00
    </td>
    </tr>
    </table>
    </div>
    <!-- FINE DPO -->
    <div>
    <h3>Soggetti Autorizzati incaricati dal titolare</h3>
    </div>
    <!-- SOGGETTI AUTORIZZATI -->
    <div>
    <table class="table table-hover mails m-0 table table-actions-bar" cellspacing="0" rules="all" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_GridViewSA" style="border-width:0px;border-collapse:collapse;">
    <tr style="border-color:DarkGray;border-width:1px;border-style:solid;">
    <th scope="col" style="border-width:0px;">Anagrafica DPO</th>
    <th scope="col" style="border-width:0px;">Nominato Da</th>
    <th scope="col" style="border-width:0px;">Tipo Incarico</th>
    </tr>
    <tr>
    <td style="border-width:0px;">
    Giovanni Borgia
    </td>
    <td style="border-width:0px;">
    Titolare
    </td>
    <td style="border-width:0px;">
    Amministratore di Sistema
    </td>
    </tr>
    </table>
    </div>
    <!-- FINE SOGGETTI AUTORIZZATI -->
    </div>
    </td>
    <td style="border-width:0px;">63</td>
    <td style="border-width:0px;">
    PAOLOTTO PAOLINO
    </td>
    <td style="border-width:0px;">
    <label class="custom-control custom-checkbox">
    <input name="ctl00$ContentPlaceHolderBody$GridViewTitolare$ctl02$CheckBox1" type="checkbox" id="ctl00_ContentPlaceHolderBody_GridViewTitolare_ctl02_CheckBox1" class="custom-control-input hidden" disabled="disabled" />
    <span class="custom-control-indicator"></span>
    </label>
    </td>
    </tr>
    </table>
    
    <script>
    function divexpandcollapse(divname) {
    var img = "img" + divname;
    if ($("#" + img).attr("src") == "images/asc.gif") {
    $("#" + img).closest("tr").after("<tr><td></td><td colspan ='100%' > " + $("#" + divname).html() + "</td></tr>")
    $("#" + img).attr("src", "images/desc.gif");
    } else {
    $("#" + img).closest("tr").next().remove();
    $("#" + img).attr("src", "images/asc.gif");
    }
    }
    
    
    function divexpandcollapseR(divname) {
    var img = "img" + divname;
    if ($("#" + img).attr("src") == "images/asc.gif") {
    $("#" + img).closest("tr").after("<tr><td></td><td colspan ='100%' > " + $("#" + divname).html() + "</td></tr>")
    $("#" + img).attr("src", "images/desc.gif");
    } else {
    $("#" + img).closest("tr").next().remove();
    $("#" + img).attr("src", "images/asc.gif");
    }
    }
    </script>

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    mamma che obbrobrio di codice (vedi PS sotto).

    Perdona la franchezza ma trovo che il tuo codice (sia il markup html sia la parte JavaScript/jQuery sia lo style applicato in linea in quel modo) infranga molte delle buone regole di programmazione; tra queste c'è il fatto che stai duplicando degli elementi che posseggono degli id. Gli id sono e devono essere univoci. La principale causa del problema è proprio questa.

    Può essere difficile comprendere ma cerco di spiegare la situazione che ti si presenta: nel tuo script hai dei contenitori nascosti, dai quali vai a copiarne il contenuto per creare dei duplicati. Stai però utilizzando gli id proprio per selezionare e manipolare questi relativi elementi, i quali vengono ovviamente selezionati in modo inatteso dal momento che posseggono id uguali. In sostanza la duplicazione del contenuto sta tutto sommato avvenendo, ma sta avvenendo all'interno del contenitore sbagliato (dove sta il contenuto originale) che è nascosto.

    Oltre al codice poco "curato", trovo che anche la logica utilizzata a livello funzionale sia non proprio ottimale sotto vari aspetti. uno tra i quali è proprio la duplicazione del contenuto per creare quello che sostanzialmente è un semplice effetto toggle.

    Mi chiedo (e ti chiedo), dal momento che il contenuto (da mostrare/nascondere) è comunque già presente sulla pagina (anche se nascosto con display:none), non sarebbe più semplice eseguire un toggle direttamente su quella stessa proprietà display, in modo da mostrare/nascondere quello stesso elemento piuttosto che creare dei duplicati in modo machiavellico?






    PS: ripeto, le mie considerazioni, sul codice e la logica utilizzati, non vogliono offendere o smontare ciò che sei riuscito a fare, ma solo puntualizzare che l'utilizzo di un procedimento troppo artigianale (cioè senza l'uso di quelle buone regole di programmazione) tende a sfociare in problematiche che a lungo andare fanno perdere tempo e salute. Chiaramente lo dico solo sulla base di questa tua discussione e del relativo codice che hai qui riportato.

    In particolare:

    - E' consigliabile separare quanto più possibile il markup (HTML) dalla presentazione (CSS) e dall'azione (JavaScript).

    - Soprattutto nell'uso delle tabelle, evitare inutile e ridondante codice CSS in linea, meglio un blocco di CSS separato magari usando qualche classe dove opportuno.

    - Evitare l'uso dello pseudo-protocollo javascript: all'interno dell'attributo href. E' considerata una cattiva pratica. Meglio usare un evento click.

    - Evitare l'uso di elementi <a> che non siano dei link, ma solo come elementi cliccabili che eseguono dello script. Meglio usare un button o un qualche opportuno elemento a cui applicare un evento click che ne esegua lo script.

    - Nello script, usare opportunamente la parola chiave this per ottenere un riferimento dell'elemento corrente (ad esempio l'elemento a cui è stato applicato l'evento click) e recuperare eventuali altri elementi contestualmente a questo, così da semplificare la selezione degli elementi stessi (senza dover passare parti di id o effettuare altre cose macchinose).

    - Evitare di usare proprietà che servono ad altri scopi per verificare lo stato dell'effetto toggle di un elemento (vedi l'attributo src del tuo caso, che potrebbe venire variato per un qualsiasi motivo con la conseguenza che la condizione in cui hai usato quel valore non funzionerà più). Meglio usare una classe o un attributo data o una qualche altra variabile che abbia specificatamente lo scopo di verificare lo stato dell'effetto toggle per quel tale elemento. Magari usare un semplice elemento span o div a cui applicare l'immagine via CSS, usando, nel caso, una classe che puoi usare per verificarne anche lo stato.

    - Evitare script e funzioni ridondanti, ma per quanto possibile cercare di scrivere codice che segua le regole di riusabilità, portabilità, leggibilità, modularità ecc. ecc. ecc.

    - ... e chiaramente gli id devono essere e restare univoci all'interno di uno stesso documento

    Sono giusto dei consigli.
    Ultima modifica di KillerWorm; 17-03-2019 a 02:49
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,675
    Ciao, capisco le tue perplessità sul codice, premesso che sto facendo una bozza della pagina che deve venire, questo codice viene creato da un controller asp.net quindi per questo vedo il codice css inline al momento. E al momento sto vedendo prima la funzionalità e poi lo sistemo.
    Ho rivisto il codice e non trovo doppi Id uguali, mi puoi indicare quali sono?
    Poi mi hai suggerito di usare il toggle, mi dai qualche delucidazione su come poterlo fare?

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,236
    I doppi id si creano nel momento in cui viene duplicato il contenuto del primo div (#divT63), cioè quando clicchi la freccetta del 63 per intenderci. Molti degli elementi al suo interno hanno degli id, tra cui gli ulteriori div che devi estendere. Dal momento che la tua funzione fa riferimento a questi id per poter risalire al contenitore in cui inserire il duplicato, il selettore jQuery rileva "giustamente" il primo contenitore (quello nascosto in cui c'è il contenuto originale che è stato appena duplicato), quindi il duplicato avviene ma nel posto sbagliato (il contenitore nascosto).

    A prescindere dal fatto che vengono duplicati gli id, il problema è più che altro a livello concettuale, cioè stai usando un metodo macchinoso per eseguire un semplice toggle (mostra/nascondi).

    Qui un esempio di come lo imposterei io:
    codice:
    <!DOCTYPE HTML>
    <html lang="it">
       <head>
          <title>Esempio</title>
          <meta charset="utf-8">
          <script src="http://code.jquery.com/jquery-latest.min.js"></script>
          <script>
             $(function(){
                $("tr.toggle>td:first-child").click(function(){
                   $(this).closest('tr').toggleClass('chiuso aperto'); 
                })
             });
          </script>
          <style>
             table{
                width: 600px;
                border-collapse:collapse;
                background: #fff;
             }
             table, th, td{
                border: 1px solid gray;
             }
             
             table td:first-child {
                width: 20px;
                min-width: 20px;
             }
             
             tr.toggle>td:first-child{
                text-align: center;
                vertical-align: top;
                font: 9px/2 Arial, Helvetica, sans-serif;
                color: #126dc9;
                cursor: pointer;
             }
             tr.toggle>td:first-child:hover{
                color: #2070ff;
                background: #eee;
             }
             tr.toggle>td:first-child::before{
                height: 20px;
             }
             tr.toggle.chiuso>td:first-child::before{
                content: '▼';
             }
             tr.toggle.aperto>td:first-child::before{
                content: '▲';
             }
             tr.toggle+tr{
                background: #eee;
                box-shadow: inset 0 3px 5px #0002;
             }
             
             tr.toggle.chiuso+tr{
                opacity: 0;
                display: none;
             }
             
             tr.toggle.aperto+tr{
                opacity: 1;
                display: table-row;
             }
             
          </style>
       </head>
       <body>
       
          <table>
             <tr class="toggle chiuso"><td></td><td>Lorem ipsum</td></tr>
             <tr>
                <td></td>
                <td>Quisque suscipit sem non est eleifend consectetur.
                   <table>
                   
                      <tr class="toggle chiuso"><td></td><td>Suspendisse malesuada massa lorem.</td></tr>
                      <tr><td></td><td>Aliquam in dolor vitae purus interdum vulputate vel ac augue.</td></tr>
                      
                      <tr class="toggle chiuso"><td></td><td>Nullam suscipit metus id sem eleifend, ut molestie eros dictum.<br>Curabitur faucibus urna nec ullamcorper pharetra.</td></tr>
                      <tr><td></td><td>Nunc eget lacus at arcu scelerisque gravida ut non lectus.</td></tr>
                      
                      <tr class="toggle aperto"><td></td><td>Donec sit amet</td></tr>
                      <tr><td></td><td>Fusce suscipit, eros id cursus suscipit, urna orci ullamcorper velit, sed ultricies mauris enim sed quam.</td></tr>
                      
                   </table>
                </td>
             </tr>
             <tr><td></td><td>Morbi venenatis nibh sit amet mi elementum semper.</td></tr>
          </table>
          
       </body>
    </html>
    Mettendo come convenzione che ad ogni tr che possegga una classe .toggle debba seguire il tr da mostrare/nascondere, ho utilizzato altre due classi (.chiuso e .aperto) che ovviamente si alternano. E' possibile quindi stabilire lo stato iniziale assegnando una di queste due classi. Il jQuery non fa altro che alternare le due classi quando si clicca sulla freccetta (dei tr toggle), tutto il resto è delegato al CSS che si occupa di mostrare le freccette in base allo stato corrente dell'elemento, e di conseguenza mostrare/nascondere i relativi tr, e infine definire tutta la parte presentazionale.

    Nota come il tutto resta più pulito e più semplice da impostare, dal momento che le tre componenti della pagina sono separate distintamente: html (contenuti), css (presentazione), script (azione).

    Ovviamente questo è solo un esempio di come poter impostare la cosa, eventualmente sta a te adeguarlo per poterlo integrare nel tuo elaborato. Poi è chiaro che si può comunque fare in tanti altri modi.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,675
    Ok, spiegazione chiarissima. Ora cerco di adattarlo nel codice .net, perchè li ho varie gridview innestate, e ti faccio sapere.
    Sicuramente il codice è più pulito di quello postato da me.

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.