テーブルセル内のデータ表示の切り替え

Question

通常のPHPループによって生成されたテーブルがあります。私がしたいのは、デフォルトでは非表示になっているが、その行のトグルリンクをクリックすると表示されるフォームを各行の最初の列に作成することです。

hiddenというCSS IDを作成し、 display：none; を設定することで、通常の切り替え可能なdivを作成できます。残念ながら、前のリンクに自動的に関連付けられる id = hidden でdivを作成し続けることはできません。

私はJavascriptとCSSの両方にかなり慣れていないので、ほとんどの場合、サンプルにパッチを当てることでこれを実行しようとしましたが、空っぽになりました。 divをテーブル内に配置できないことをいくつかの場所で読んだことがあるので、多分これについてすべて間違っています。

コードが何をするのか、どのように動作させたいのか、例を示しますが、もちろん動作しません。

<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

各行に異なるIDを使用するだけです：

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

一部のブラウザはテーブル要素内のdivをサポートしていないと思うので、DIVではなくスパンにします。また、IDで参照する代わりに、 this.nextSibling（）をトグルに渡し、DOMナビゲーションを使用して次の兄弟（SPANである必要があります）を表示/非表示にします。

  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>

編集：@tomhaighが示唆しているように（そして例に示されているように）、これが機能するには、アンカーとdivの間にテキスト/空白がないことを確認する必要があります。 DOM要素を指定すると、次の非テキストDOM要素を選択して返す関数を作成することもできます。次に、 this をその関数に渡し、結果をトグル関数に渡します。

Answer 3

各行とフォームのIDを維持する代わりに、 jQuery を使用してイベントを相対的に参照することをお勧めします（一般的な解決策）。これにより、非アクティブな行フォームを簡単に非表示にすることもできます。これは、一度に1つのフォームしか送信できないため、良いアイデアです。

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>

デモ：

これの実際のデモは、こちら

にあります。