Attiva / disattiva la visualizzazione dei dati all'interno della cella della tabella

Question

Ho una tabella generata da un normale ciclo PHP. Quello che voglio fare è creare un modulo nella prima colonna di ogni riga che è nascosto per impostazione predefinita ma appare quando si fa clic su un collegamento di attivazione / disattivazione in quella riga.

Posso fare un normale div attivabile attivando / disattivando creando un ID CSS chiamato nascosto e impostando display: none; . Purtroppo non riesco a continuare a creare div con id = hidden che sono automaticamente associati al link precedente.

Sono abbastanza inesperto sia con Javascript sia con CSS, quindi per lo più ho provato a farlo mettendo insieme degli esempi ma sto arrivando vuoto. Ho letto in alcuni punti che non puoi mettere div all'interno di un tavolo, quindi forse sto sbagliando tutto.

Ecco un esempio di ciò che fa il codice e di come vorrei che funzionasse, ma ovviamente non lo fa.

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


<?php

while($array = mysql_fetch_array($sql))
    {
?>
<tr>
    <td>
<?php
        echo $array['some_data'];
?>
        <a href="#" onclick="toggle('hidden');">Toggle</a>
        <div id="hidden"><?php echo $array['hidden_thing']; ?></div>
    </td>
    <td>
        <?php echo $array['some_other_data']; ?>
    </td>
</tr>
<?php
    }
?>

Answer 1

Usa un ID diverso per ogni riga:

<?php
$count = 0;
while($array = mysql_fetch_array($sql)) {
  $id = 'hidden' . $count++;
  $data = $array['some_data'];
  $hidden = $array['hidden_thing'];
  $other_data = $array['other_data'];
  echo <<<END
<tr>
  <td>$data <a href="#" onclick="toggle('$id');>Toggle</a>
    <div id="$id">$hidden_thing</div>
  </td>
  <td>$other_data</td>
</tr>

END;
}

Answer 2

Rendilo un intervallo invece di un DIV poiché penso che alcuni browser non supportino div all'interno degli elementi della tabella. Inoltre, invece di fare riferimento ad esso tramite ID, passa this.nextSibling () al toggle, usando la navigazione DOM per ottenere il prossimo fratello (che dovrebbe essere lo SPAN) per mostrare / nascondere.

  function toggle(ctl) {
      var state = ctl.style.display;
      if (state == 'block') {
          document.getElementById(id).style.display = 'none';
      } else {
          document.getElementById(id).style.display = 'block';
      }
  }


  <a href="#" onclick="toggle(this.nextSibling);">Toggle
  </a><div><?php echo $array['hidden_thing']; ?></div>

MODIFICA : come suggerisce @tomhaigh (e come mostrato nell'esempio), affinché funzioni, devi assicurarti che non ci sia testo / spazio bianco tra l'ancora e il div. Puoi anche scrivere una funzione che, dato un elemento DOM, selezionerebbe il successivo elemento DOM non testuale e lo restituirebbe. Quindi passa this a quella funzione e il risultato alla tua funzione di attivazione / disattivazione.

Answer 3

Ecco la mia (soluzione generale) consigliata che utilizza jQuery per fare riferimento agli eventi relativamente invece di mantenere gli ID per ogni riga e modulo. Ciò consente anche di nascondere facilmente i moduli di riga non attivi, il che è una buona idea poiché è possibile inviare un solo modulo alla volta.

HTML:

<table id="tableForms" class="table">
  <tr>
    <td class="rowForm"><form><span>form1 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form2 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
  <tr>
    <td class="rowForm"><form><span>form3 content</span></form></td>
    <td class="showRowForm">click on row to show its form</td>
    </tr>
</table>

JavaScript:

<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
//as soon as the DOM is ready, run this function to manipulate it
$(function() {
    // get all tr elements in the table 'tableForms' and bind a 
    // function to their click event
    $('#tableForms').find('tr').bind('click',function(e){
        // get all of this row's sibblings and hide their forms.
        $(this).siblings().not(this).find('td.rowForm form').hide();

        // now show the current row's form
        $(this).find('td.rowForm form').show();
    }).
    // now that the click event is bound, hide all of the forms in this table
    find('td.rowForm form').hide();
});
</script>

Demo:

Una demo funzionante può essere trovata qui qui.