1

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

hidden と setting という CSS id を作成することで、通常のトグル可能な div を作成できますdisplay: none;。残念ながら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
    }
?>
4

3 に答える 3

3

行ごとに異なる 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;
}
于 2009-01-09T11:22:34.413 に答える
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、その関数に渡し、結果をトグル関数に渡します。

于 2009-01-09T11:20:11.687 に答える
1

各行とフォームの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>

デモ：

これの実際のデモはここにあります。

于 2009-01-09T19:11:03.353 に答える