0

さて、クリックすると別のユーザー名の下にドロップダウンし、そのユーザーの名前、電子メールなどを表示しますが、クリックしたユーザー名のすぐ下ではなく、各ユーザー名の下に各ユーザーのユーザー情報をドロップダウンしていますの上。

非表示のすべての要素ではなく、次の要素のみを表示するように指示する方法はありますか?

クリックしたインデックスを取得しようとしました (ユーザー名を持つものですが、任意のタイプのインデックス + 1 タイプのロジックを使用して機能する関数を取得できないようです。

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

<?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 () {
  var nextIndex = $("tr").index(this) + 1;
  $("div.show_user_info tr.showhide:hidden").slideDown("slow");
 });

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

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

私が取り組んでいるページは、ユーザーが登録要求を承認または拒否できる管理ページです。私はphpを使用して、登録を保留しているデータベース内の各ユーザーのテーブル行を動的に作成しています。

そうは言っても、ユーザーがユーザー名をクリックすると、そのユーザー情報 (名前、要求日など) を表示する + を挿入したいのですが、ユーザーが別のユーザーをクリックすると消えます。その上にユーザー名を入力し、そのユーザーの別の行などを表示させます。

テーブルの行を作成するために使用しているphpは次のとおりです。

<?php
    for ($output_user = 0; $output_user <= $num_pending - 1; $output_user++)
    {
        echo "\n\t<tr>\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>";
    }
?>

PHP を使用してこれを行う onclick イベントを作成できますか、それとも JavaScript を使用する必要がありますか? 私はインターネット上で同様の例を探してきましたが、役立つものは何も見つかりません。

4

3 に答える 3

2

利便性とブラウザー間の互換性のために、私はそのためにjQueryを使用しましたが、それがなくても（または、ユーザーが毎回ページをリロードしてもかまわない場合は、javascriptがまったくなくても）確実に実行できます。

デフォルトで非表示にしておく必要のある追加情報を含むクラスを持つ要素を持つ構造を想定していdetailsます。私のjsFiddleをチェックして、実際にどのように機能するかを確認してください。

$(".details").each(function() {
  var $link = $("<a href='javascript:void(0)'>+</a>");
  var $details = $(this);
  $details.hide().before($link);

  $link.on("click", function() {
    $details.toggle();
    $(".details").not($details).hide();
  });
});​
于 2012-10-06T02:46:47.670 に答える
1

これを実現するには、jQueryを使用することを強くお勧めします。<div id="user_info"></div>情報を表示したい場所にを追加します。

$("#YOUR USER DIV").click(function() {
    $("div#user_info").html("SOME USER INFORMATION WITH HTML");
});
于 2012-10-06T02:32:51.463 に答える
0

クリック可能な「+」を、クリックした内容を説明するクエリ文字列を使用してphpスクリプトを呼び出すリンクにし、クエリ文字列で指定されたユーザーの詳細を含むページをphpに返すことで確実にこれを行うことができます...しかしjavascriptを使用すると、ユーザーエクスペリエンスが向上する可能性があります。

于 2012-10-06T02:26:46.803 に答える