Alternar exibição de dados dentro de células mesa

Question

Eu tenho uma tabela que é gerado por um loop PHP normal. O que eu quero fazer é criar um formulário na primeira coluna de cada linha que está escondido por padrão, mas aparece quando você clica em um link de alternância nessa linha.

Eu posso fazer uma div normais de alternância-poder, criando um id CSS chamado ocultos e definir display: none;. Infelizmente, não posso continuar a criar divs com id=hidden que são automaticamente associado ao link anterior.

Estou bastante inexperiente com JavaScript e CSS, então eu principalmente tentou fazer isso remendando exemplos juntos, mas eu estou chegando vazio. Eu li em alguns lugares que você não pode colocar divs dentro de uma tabela, então talvez eu estou indo sobre esta tudo errado.

Aqui está um exemplo do que o código faz e como gostaria que funcionou, mas é claro que não.

<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

Basta usar um ID diferente para cada linha:

<?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

Torná-lo um período em vez de uma DIV como eu acho que alguns navegadores não suportam divs dentro elementos da tabela. Além disso, em vez de se referir a ele pelo ID, passar em this.nextSibling() à alternância, usando a navegação DOM para obter o próximo irmão (que deve ser o SPAN) para exibir / ocultar.

  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>

Editar : Como @tomhaigh sugere (e como mostrado no exemplo), para que isso funcione você precisa ter certeza de que não há nenhum texto / espaço em branco entre a âncora eo div. Você também pode escrever uma função que, dado um elemento DOM, deve selecionar o próximo elemento DOM não-texto e devolvê-lo. Em seguida, passe this para essa função e o resultado a seu cargo alternar.

Answer 3

Aqui está a minha (solução geral) recomendou o uso jQuery para eventos de referência relativamente ao invés de manter ids para cada linha e forma. Isso também permite que você formas linha hide não activos facilmente, o que é uma boa idéia, pois apenas um formulário pode ser enviado por vez.

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>

Demonstração:

A demonstração de trabalho desta pode ser encontrada aqui.