1

承認待ちのユーザー登録のリストを表示する管理ページを作成しています。ユーザー名と各ユーザーの承認/拒否チェックボックスを一覧表示するテーブルがあります（おそらくラジオボタンに変更します）。リストされた各ユーザーの下に、詳細（氏名、登録日など）を示す非表示のテーブル行があります。

私が欲しいのは、ユーザー名でtrをクリックし、その下に非表示のtrを表示してすべての詳細を表示し、非表示でなくなったtrをクリックすると、再び非表示にすることです。

実際に行っているのは、ユーザー名でtrをクリックしたときにすべての非表示のtrを表示し、以前に非表示にしたtrの1つをクリックすると、その特定のtrが非表示になることです。

インデックス+1を使用して、どの非表示のtrを表示するかを指定する方法はありますか？または、最初の子の機能でこれを行う方法はありますか？それとも、これを行うためのより良い方法はありますか？

ページが読み込まれたときに保留中のユーザーが何人いるかを知る方法がないため、非表示のtrで特定のクラス名を使用することはできません（すべてデータベースから取得されます）。

これが私が持っているコードです：

<?php
  for ($output_user = 0; $output_user <= $num_pending - 1; $output_user++)
  {
    echo "\n\t<tr class=\"pending_users\">\n\t\t<td class=\"admin\">".$pending_user[$output_user][0]."</td>";
    echo "\n\t\t<td class=\"m_1\"><input type=\"checkbox\" value=\"approve\"/></td>";
    echo "\n\t\t<td class=\"m_l\"><input type=\"checkbox\" value=\"deny\"/></td>";
    echo "\n\t</tr>";
    echo "\n\t<tr class=\"showhide\">\n\t\t<td class=\"admin\" colspan=\"3\">Name:".$pending_user[$output_user][1]." ".$pending_user[$output_user][2]."\nEmail: ".$pending_user[$output_user][3]."\nEnrol Date: ".$pending_user[$output_user][4]."</td>\n\t</tr>";
    echo "\n\t</tr>";
  }
?>
<script>
 $(document).ready(function() {
  //Hides specific user details when the page loads
  $("div.show_user_info tr.showhide:visible").hide();

  //Makes every other row another bgcolor - effects pending user table only
  $("tr.pending_users:odd").css("background-color", "#ffff00");
 });

 $("td.admin").click(function () {
  $("div.show_user_info tr.showhide:hidden").slideDown("slow");
 });

 $("tr.showhide").click(function () {

  $(this).slideUp("slow");          
 });
</script>
4

1 に答える 1

3

$(this).parent().next('tr.showhide')クリックしたセルの親行の次のtr.showhideを取得するために使用します。

$('tr.pending_users td.admin')
      .click(function(){$(this).parent()
                        .next('tr.showhide')
                         .slideToggle();});

slideToggle()可視性を切り替えます。

デモ： http： //jsfiddle.net/doktormolle/kCL5A/

于 2012-10-07T05:56:21.687 に答える