データベースのデータをテーブルで表示させ、なおかつ詳細情報をトグルで表示させたい

現在、「氏名」「出席番号」「身長」「体重」「備考」の５つのデータをデータベースに格納している状態で、
「備考」以外をテーブルに表示させています。

テーブルの列をクリックしたらその列に対応した備考が下に表示されるようにしたいと考えています。
備考はjQueryのtoggle()メソッドで表示、非表示を切り替えています。

ただ、テーブルデータは<?php foreach　?>で一列ずつ表示しているため
実際クリックするとクリックした列以外のところも備考が開いてしまいます。

どのようにすればクリックした列だけの備考を表示させることができるでしょうか。

よろしくお願いします。

admin.php
1<?php
2
3$message_array = array();
4$pdo = null;
5$stmt = null;
6$option = null;
7
8try {
9    $option = array(
10        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
11        PDO::MYSQL_ATTR_MULTI_STATEMENTS => false
12    );
13$pdo = new PDO('mysql:host=localhost;dbname=test', $user, $pass, $option);
14} catch(PDOException $e) {
15    $error_message[] = $e->getMessage();
16}
17
18if( !empty($pdo) ) {
19  $sql = "SELECT * FROM test ORDER BY id ASC";
20  $message_array = $pdo->query($sql);
21}
22
23$pdo = null;
24
25?>
26
27<!DOCTYPE html>
28<html lang="en">
29
30<head>
31<meta http-equiv="Cache-Control" content="no-cache">
32    <meta charset="UTF-8">
33    <meta http-equiv="X-UA-Compatible" content="IE=edge">
34    <meta name="viewport" content="width=device-width, initial-scale=1.0">
35    <title>管理表</title>
36    <link rel="stylesheet" href="admin.css">
37    <script src="jquery-3.6.0.min.js"></script>
38    <script src="admin.js"></script>
39</head>
40
41<body>
42    <table align="center">
43
44        <tr>
45          <th>氏名</th> 
46          <th>出席番号</th>
47          <th>身長</th>
48          <th>体重</th>  
49        </tr>
50
51        <?php if( !empty($message_array) ){ ?>
52        <?php foreach( $message_array as $value ){ ?>
53            
54        <tr class="open">
55        <td><?php echo htmlspecialchars( $value['Name'], ENT_QUOTES, 'UTF-8'); ?></td>
56        <td><?php echo htmlspecialchars( $value['class_number'], ENT_QUOTES, 'UTF-8'); ?></td>
57        <td><?php echo htmlspecialchars( $value['height'], ENT_QUOTES, 'UTF-8'); ?></td>
58        <td><?php echo htmlspecialchars( $value['body_weight'], ENT_QUOTES, 'UTF-8'); ?></td>
59        </tr>
60
61        <tr>
62        <td colspan="4" class="more"><div class="more"><?php echo htmlspecialchars( $value['note'], ENT_QUOTES, 'UTF-8'); ?></div></td>
63        </tr>
64
65        <?php } ?>
66        <?php } ?>
67       </table>
68
69    </body>
70
71</html>

admin.css
1body {
2    background-color: #fff;
3    color: #000;
4    font-family:'Meiryo',"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック","Osaka", sans-serif;
5    margin-top: 30px; 
6       }
7    
8.more {
9    display: none;
10    background-color: rgb(233, 233, 233);
11     }
12
13table th,table td{
14    padding: 5px 10px;
15    text-align: center;
16    border-bottom:solid 1px rgb(190, 190, 190);    
17  }

admin.js
1$(document).ready(function(){
2    $(".open").on("click", function() {
3      $(".more").slideToggle();
4    });
5  });

行動規範の内容に同意します

回答1件

ベストアンサー

「クリックしたopenの配下のmore」を指定すれば良いかと思います。

幾つか手段はありますが、
①next()など兄弟要素を指定するような形で辿る
②data属性などを利用し、親と子に共通の番号を付ける（例えばIDとか。すると「親のdata属性に指定されている番号を利用したIDで指定できるので確実）

※いずれもevent.currentTargetの取得が必要

投稿2022/03/18 11:12

m.ts10806

総合スコア80850

ueccheee

2022/03/18 11:26

ご回答いただきありがとうございます！ ②のdata属性を利用する方法について、もしよろしければ具体的に教えていただけますでしょうか。。どのように共通の番号をつければよろしいでしょうか? 知識不足で申し訳ありません。よろしくお願いします。

m.ts10806

2022/03/18 11:31

テーブル構造分かりませんが <tr class="open" data-id="<?=$data["id"]?>"> <td colspan="4" class="more" id="more_<?=$data["id"]?>"> とすれば「クリックしたopenに指定されている .data("id")」さえ取得できれば more_{n}と連携しますよね。

ueccheee

2022/03/18 13:48

<?php if( !empty($message_array) ){ ?> <?php foreach( $message_array as $value ){ ?> <tr class="open" data-id="<?=$value["id"]?>"> <td><?php echo htmlspecialchars( $value['Name'], ENT_QUOTES, 'UTF-8'); ?></td> <td><?php echo htmlspecialchars( $value['class_number'], ENT_QUOTES, 'UTF-8'); ?></td> <td><?php echo htmlspecialchars( $value['height'], ENT_QUOTES, 'UTF-8'); ?></td> <td><?php echo htmlspecialchars( $value['body_weight'], ENT_QUOTES, 'UTF-8'); ?></td> </tr> <tr> <td colspan="4" class="more" id="more_<?=$value["id"]?>"><div class="more"><?php echo htmlspecialchars( $value['note'], ENT_QUOTES, 'UTF-8'); ?></div></td> </tr> data-id=の後に入る数字が<?=$value["id"]?>で指定されるという解釈で書いてみましたが、やはりすべての備考欄が表示されてしまいます。現在admin.jsには特に手を加えていないのですがどこか修正する部分はありますでしょうか。お手数おかけしますがよろしくお願いします。

m.ts10806

2022/03/18 21:27

もちろん必要です。「クリックしたopenに指定されている .data("id")」を取得しないといけません。（なので回答にevent.currentTargetというヒントを出したのですが）例： $(".open").on("click", function(e) { 　　const currentid = $(e.currentTarget).data("id") 　　　　$("#more_"+currentid).slideToggle(); }); ※コピペで動くかどうかは別なのであくまで実装イメージとして自身で調整してください。

ueccheee

2022/03/19 02:44

返信が遅くなり申し訳ありません。無事動きました！本当にありがとうございました！！これを機にもっともっと精進していきます...! お世話になりました！

m.ts10806

2022/03/19 02:55

いえ、「もっといいやり方」を追究するとキリがないので、自分でやりやすいような法則を設けてやりやすいように組んでるだけです。

行動規範の内容に同意します