ユーザ管理システムを開発しています。
内容は、テーブルデータ全件表示画面があり、htmlで疑似的にラジオボタンをレコードの隣に表示させています。
このラジオボタンを使用して、「選択したレコードを画面下部にタブ切り替えの要領で詳細表示」機能を実装したいです。

「選択したレコードを画面下部にタブ切り替えの要領で詳細表示」なのですが、CSSで使用するタブ切り替えのコードでは固有の名前を付けなければ切り替え時の制御を行えません。（IDの値を変数等で指定することで可能？）
なんとか私の望む動作を実現することは可能でしょうか？

拙い日本語ですみません。

■画面イメージ
デフォルトではID0001のレコードが選択されている状態で詳細表示に反映している。
ID0002を押すとそれにともない詳細表示画面も0002の内容に切り替わる。

index
1<body>
2    <header>
3        <h1>会員リスト</a></h1>
4    </header>
5    <a href="register.php">新規会員登録</a>
6    <main>
7        <table>
8            <thead>
9              <tr>
10                <th>#</th>
11                <th>ID</th>
12                <th>企業名</th>
13                <th>企業名フリガナ</th>
14                <th>郵便番号</th>              
15                <th>住所</th>
16                <th>担当部署</th>
17                <th>電話番号</th>
18                <th>FAX</th>
19                <th>メールアドレス</th>
20              </tr>
21           </thead>
22       <tbody>
23       <?php foreach($M_COMPANY as $M_COMPANY):?> <!--レコード全件-->
24            <tr>
25               <td><input type="radio" name="record" value=""></td>
26               <td><?php echo $M_COMPANY['company_ID']; ?></td>
27               <td><?php echo $M_COMPANY['company_name']; ?></td>
28               <td><?php echo $M_COMPANY['company_TL']; ?></td>
29               <td><?php echo $M_COMPANY['postal']; ?></td>
30               <td><?php echo $M_COMPANY['address']; ?></td>
31               <td><?php echo $M_COMPANY['department']; ?></td>
32               <td><?php echo $M_COMPANY['tel']; ?></td>
33               <td><?php echo $M_COMPANY['fax']; ?></td>
34               <td><?php echo $M_COMPANY['email']; ?></td>
35           </tr>
36       <?php endforeach; ?>
37
38       </tbody>
39            </table>
40
41        <table>　<!--詳細表示-->
42            <tbody>
43            <tr>
44 
45               <td><?php echo $M_COMPANY['company_ID']; ?></td>
46               <td><?php echo $M_COMPANY['company_name']; ?></td>
47               <td><?php echo $M_COMPANY['company_TL']; ?></td>
48               <td><?php echo $M_COMPANY['postal']; ?></td>
49               <td><?php echo $M_COMPANY['address']; ?></td>
50               <td><?php echo $M_COMPANY['department']; ?></td>
51               <td><?php echo $M_COMPANY['tel']; ?></td>
52               <td><?php echo $M_COMPANY['fax']; ?></td>
53               <td><?php echo $M_COMPANY['email']; ?></td>
54
55            </tr>
56            </tbody>
57        </table>
58

参考にしたいCSSタブ切り替えのサイト

yambejp

2021/06/22 02:18 編集

$M_COMPANYがなにかわかりませんまた$M_COMPANYをforeacｈで同じ$M_COMPANYに受け直してはいけません「詳細表示」の詳細ってなんでしょう？同じデータしか表示してないようですが・・・

mmm022

2021/06/22 02:24

詳細表示は現在同じデータしか表示しない仕様ですが、後々に増える予定です。 $M_COMPANYは指定テーブル名であり、テーブル内の件数分だけ表示する処理を行っています。

yambejp

2021/06/22 02:35 編集

おそらくjsかcssが必要ですがPHPだけで実現したいのでしょうか？また効率的にやるにはPHPでAPIを用意し、 fetchなどで要求に応じたデータを返すような仕組みが必要になります

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

回答1件

ベストアンサー

sample

PHP
1<?PHP
2$datas=[
3  ["id"=>"1","name"=>"aaa","shosai1"=>"AAA1","shosai2"=>"AAA2"],
4  ["id"=>"2","name"=>"bbb","shosai1"=>"BBB1","shosai2"=>"BBB2"],
5  ["id"=>"3","name"=>"ccc","shosai1"=>"CCC1","shosai2"=>"CCC2"],
6  ["id"=>"4","name"=>"ddd","shosai1"=>"DDD1","shosai2"=>"DDD2"],
7];
8?>
9<script>
10window.addEventListener('DOMContentLoaded', ()=>{
11  document.querySelectorAll('[type=radio]').forEach(x=>{
12    x.addEventListener('change',()=>{
13      const data=JSON.parse(x.dataset.json);
14      const shosai=document.querySelector('#shosai tbody tr');
15      shosai.innerHTML="";
16      ["id","name","shosai1","shosai2"].forEach(y=>{
17        shosai.appendChild(Object.assign(document.createElement('td'),{textContent:data[y]}));
18      });
19    });
20  });
21});
22</script>
23<table>
24<thead>
25<tr>
26<th>#</th>
27<th>ID</th>
28<th>企業名</th>
29</tr>
30</thead>
31<tbody>
32<?php foreach($datas as $data){ ?>
33<tr>
34<td><input type="radio" name="record" value="<?=$data['id'] ?>" data-json="<?=htmlspecialchars(json_encode($data))?>"></td>
35<td><?=$data['id'] ?></td>
36<td><?=$data['name'] ?></td>
37</tr>
38<?php }?>
39</tbody>
40</table>
41<table id="shosai">
42<thead>
43<tr>
44<th>ID</th>
45<th>企業名</th>
46<th>詳細1</th>
47<th>詳細2</th>
48</tr>
49</thead>
50<tbody>
51<tr>
52</tr>
53</tbody>
54</table>