前提・実現したいこと
表の項目によって表示させるモーダルを変えたいです。
ただしベースの形は同じで、中身の表示情報が変わる
(idを変えるなど)ようなイメージです。
詳細
name | code | color |
---|---|---|
apple | data_ap | red |
orange | data_or | orange |
lemon | data_le | yellow |
上記のようなデータがCSVで保存されていて1行ずつ読み込んで
テーブルの形になるように出力しています。
イメージとしては以下のようになります。
jacascript
1<table class="table"> 2 <thead> 3 <tr> 4 <th >name</th> 5 <th >code</th> 6 <th >color</th> 7 </tr> 8 </thead> 9 10<?php 11$lines_t = file($csv_path); 12 13foreach($lines_t as $line_t){ 14$csv_data_t = explode(',',$line_t); 15 16?> 17<tbody> 18<tr> 19 <td><?php echo $csv_data_t[0]; ?></td> 20 <td><a class="fruit-color" href="#" data-toggle="modal" id="modal_value"> <?php echo $csv_data_t[1];?></a></td> 21 <td><?php echo $csv_data_t[2]; ?></td> 22</tr> 23</tbody> 24<?php 25 }; 26?> 27</table> 28 29 30<!-- モーダル --> 31<div id="modal_value" class="modal fade" role="dialog"> 32 <div class="modal-dialog"> 33 <div class="modal-content"> 34 <div class="modal-header"> 35 ヘッダー 36 </div> 37 <div class="modal-body"> 38 りんごです(オレンジですなど) 39 </div> 40 <div class="modal-footer"> 41 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 42 </div> 43 </div> 44 </div> 45</div> 46 47 48
りんごのcodeをクリックしたらモーダル内にはりんごの情報
オレンジのcodeをクリックしたらモーダル内にはオレンジの情報
が出力されるようにしたいです。
★ ↓追記↓ ★
modalの出力にはbootstrap3.3.7を使っています。
下記ページのDownload Bootstrap3.7.7ボタンでダウンロードされたzipを
ローカルに配置し読み込んでいます。
(バージョンが若干古いのは仕様の関係です。。)
bootstrap3.3.7
jQueryはwordpress4.9.6に入っている?ものを使っています。
wordpressからインストールできるプラグインは使っていません。
★ ↑追記↑ ★
試したこと
1)
上記ソース$csv_data_t[i]にあたる値をidに設定。(iは可変)
モーダル側のidも$csv_data_t[i]で待つようにしましたが
複数行ある場合だと最後の行しかモーダルが表示されませんでした。
2)
1)があったので、最終行以外も表示させるために
クリックイベントを発生させjQueryを使ってモーダル表示対象にしたいidを取得
モーダルが表示できないかと考えました。
この場合は逆に1番先頭行だけが動作しています。
<script> jQuery(function() { jQuery("#modal_value").click(function() { var aaa = jQuery("#modal_value").text(); console.log(aaa); var name_tmp = "data_" + aaa; //modalのidを「data_code」のような変数にしたいとして設定した場合 jQuery(name_tmp).modal("show"); }); }); </script>
補足情報
wordpressを使っている関係でhtml + php がベースになっています。
実際のデータはもっと行が増えるのでできるだけ
スマートに書けたらいいなと思っています。
モーダル一つ一つを別ファイルで~とかの方が早いなど
なにか知識お持ちでしたらぜひご教授ください。
また情報不足ありましたらご指摘お願いします。
回答1件
あなたの回答
tips
プレビュー