Toggle Datenanzeige innerhalb Tabellenzelle

Question

Ich habe eine Tabelle, die von einer normalen PHP-Schleife erzeugt wird. Was ich tun möchte, ist ein Formular in der ersten Spalte jeder Zeile erstellen, die standardmäßig ausgeblendet ist aber angezeigt, wenn Sie einen Gelenkstangenabstützbauteil in dieser Zeile klicken.

Ich kann ein normales Toggle-able div, indem Sie eine CSS-ID genannt versteckt und Einstellung display: none; zu schaffen. Leider halten kann ich nicht divs mit id=hidden schaffen, die automatisch mit dem vorhergehenden Link zugeordnet ist.

Ich bin ziemlich unerfahren mit sowohl Javascript und CSS, also habe ich vor allem versucht, dies zu tun, indem sie zusammen Beispiele Patchen, aber ich komme leer aus. Ich habe an einigen Stellen gelesen, dass Sie nicht divs innerhalb einer Tabelle setzen können, vielleicht über Ich werde dies alles falsch.

Hier ist ein Beispiel dafür, was der Code tut und wie ich wünschte, es hat funktioniert, aber natürlich nicht.

<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

Nur eine andere ID für jede Zeile verwenden:

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

Erstellen Sie eine Spanne es anstelle eines DIV, wie ich denke, dass einige Browser nicht unterstützen divs innerhalb von Tabellenelementen. Auch anstelle ihn von ID zu verweisen, übergibt in this.nextSibling() zum Umschalten, DOM-Navigation mit dem nächsten Geschwister zu bekommen (was der SPAN sein sollte) / auszublenden zu zeigen.

  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>

Bearbeiten : Wie @tomhaigh schlägt vor (und, wie im Beispiel dargestellt), für diese arbeiten Sie sicherstellen müssen, dass es keinen Text / Leerzeichen zwischen dem Anker und dem div. Sie könnten auch eine Funktion, die, da ein DOM-Element, das nächste Nicht-Text-DOM-Element schreiben, und es zurückgeben würde wählen. Dann passiert this zu dieser Funktion und das Ergebnis auf Ihre Umschaltfunktion.

Answer 3

Hier ist meine empfohlen (allgemeine Lösung) unter Verwendung von jQuery Ereignisse verweisen relativ statt Aufrechterhaltung IDs für jede Zeile und Form. Auf diese Weise können Ihnen auch nicht-aktive Zeile Formen leicht verstecken, was eine gute Idee ist, kann, da nur eine Form zu einem Zeitpunkt eingereicht werden.

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:

Eine Arbeits Demo dies kann hier.