質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

4回答

2567閲覧

クリックしたら、詳細を表す方法

aba623ky

総合スコア63

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/10/20 07:14

よくあるサイトで、クリックボタンを押すとその詳細が現れるものがありますが、どうやったらできますか?
例えば、

html

1<a href="〇〇html">Aくん</a>

を押す方法はありますが、別ファイルの〇〇htmlを使うのではなく、同じファイル内にあるものを指定して表示する方法はどういった方法ですか?

同ファイルに二つのhtmlがあります。

table1のa href=をクリックしてtable2を表示するには何を使うといいですか?
※table2にidを指定するといいんですかね?適当に答えてしまいましたが・・・笑

table1

html

1<table><tr> 2<td><a href="">Aくん</a></td> 3</tr> 4

table2

html

1<table> 2<tr> 3<td>身長</td> 4</tr> 5<tr> 6<td>体重</td> 7</tr> 8<tr> 9<td>年齢</td> 10</tr> 11</table>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答4

0

個人ごとにテーブルを作成してidで指定してもいいですが
冗長な構成になりやや効率がわるいかもしれませんね。
今回の用途であれば各データにclassを指定してやれば参照できます。

参照したデータについては擬似的なモーダルウィンドウを作るとよいでしょう

サンプル

手抜きモーダルサンプルです
ちゃんと実装する場合はなにかライブラリを使ったほうがよいでしょう
モーダルのライブラリはいろいろあるので幾つか試した上で、
使い勝手がいいものを選んでください

HTML

1<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3$(function(){ 4 $('a.view').on('click',function(e){ 5 e.preventDefault(); 6 var selector=$('.'+$(this).attr('id')); 7 var txt=""; 8 txt+="氏名:"+selector.filter(".name").html()+"<br>"; 9 txt+="身長:"+selector.filter(".height").html()+"<br>"; 10 txt+="体重:"+selector.filter(".weight").html()+"<br>"; 11 txt+="年齢:"+selector.filter(".age").html()+"<br>"; 12 txt+="<br>[クリックしたら閉じます]"; 13 $('#mymodal').remove(); 14 $('<div>'+txt+'</div>').attr('id','mymodal').insertAfter('#wrap').hide(); 15 var w1=$('#mymodal').width(); 16 if(w1<200) w1=200; 17 var h1=$('#mymodal').height(); 18 if(h1<200) h1=200; 19 $('#wrap').css({height:"100%",width:"100%",opacity:0.3}); 20 var w0=$('#wrap').width(); 21 var h0=$('#wrap').height(); 22 $('#mymodal').css({"border":"1px solid #000000","background-Color":"aqua","position":"absolute","top":(h0-h1)/2,"left":(w0-w1)/2,"width":w1,"height":h1}) 23 .show().on('click',function(){$('#wrap').css({opacity:1});$(this).remove()}); 24 }); 25}); 26</script> 27 28<div id="wrap"> 29<table> 30<tr><td><a href="#" class="view" id="a">Aくん</a></td></tr> 31<tr><td><a href="#" class="view" id="b">Bくん</a></td></tr> 32<tr><td><a href="#" class="view" id="c">Cくん</a></td></tr> 33</table> 34 35 36<table> 37<tr> 38<td>氏名</td> 39<td class="a name">A田 A男</td> 40</tr> 41<tr> 42<td>身長</td> 43<td class="a height">150cm</td> 44</tr> 45<tr> 46<td>体重</td> 47<td class="a weight">50kg</td> 48</tr> 49<tr> 50<td>年齢</td> 51<td class="a age">18</td> 52</tr> 53<tr> 54<td>氏名</td> 55<td class="b name">B山 B造</td> 56</tr> 57<tr> 58<td>身長</td> 59<td class="b height">180cm</td> 60</tr> 61<tr> 62<td>体重</td> 63<td class="b weight">100kg</td> 64</tr> 65<tr> 66<td>年齢</td> 67<td class="b age">20</td> 68</tr> 69<tr> 70<td>氏名</td> 71<td class="c name">C岡 C助</td> 72</tr> 73<tr> 74<td>身長</td> 75<td class="c height">170cm</td> 76</tr> 77<tr> 78<td>体重</td> 79<td class="c weight">55kg</td> 80</tr> 81<tr> 82<td>年齢</td> 83<td class="c age">25</td> 84</tr> 85</table> 86</div>

投稿2016/10/20 07:20

編集2016/10/21 14:19
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/20 07:22

擬似的なモーダルウィンドウを作るとは、どうやればいいのですか?
aba623ky

2016/10/20 11:42

Aくんのaタグのonclickでshowにしてあげるといいというコメントがありましたが・・・ また、個人ごとではなく全体のtableを一括して適用させたいです。
退会済みユーザー

退会済みユーザー

2016/10/21 02:58

>擬似的なモーダルウィンドウを作るとは、どうやればいいのですか? 一応自分の回答がそれに当てはまると思うのですが…
yambejp

2016/10/21 03:13

イメージがわかないのかもしれないのでとりあえず手抜きのサンプル追記しておきました
guest

0

「よくあるサイトで、クリックボタンを押すとその詳細が現れるもの」というのが曖昧なので「このサイトで使われているこういう状態を実装したい」と具体例を出した方がいいと思いますよ。

同じページ内でリンクしたい
http://www.tagindex.com/html_tag/link/a_id.html

onclickで表示したい
http://ryus.co.jp/blog/htmltitleclickshow/

モーダルウィンドウを表示したい
http://kwski.net/jquery/787/

投稿2016/10/21 01:07

dit.

総合スコア3235

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/21 08:57

よくあるサイトとは、例えばgoogleで坂本龍馬を検索すると、坂本龍馬についていっぱい出てきますよね。 坂本龍馬のwikipediaの部分をクリックしたら、坂本龍馬のwikipediaの記事が表示されますよね。 よくあるサイトとはそのことです。
dit.

2016/10/21 14:32

それは単純に坂本龍馬のWikipediaのページへリンクしているだけですよね? そもそも質問に書かれている「同じファイルに2つのHTML」というのがまずわからないのですが… 内容はサンプルで構いませんが、一部だけ(テーブルだけ)でなく全体を示した方が良いと思います。
guest

0

https://syncer.jp/jquery-modal-window

これを使えば実現できそうですがどうでしょうか?

投稿2016/10/20 07:24

編集2016/10/21 03:01
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

cssで初期状態はdisplay:none;にしておき、
Aくんのaタグのonclickでshowにしてあげるといいですよ。

投稿2016/10/20 07:23

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aba623ky

2016/10/20 11:41

onclickは、javascript ですよね?
aba623ky

2016/10/20 15:38

個人ごとではなく全体のtableを一括して適用させるにはどう書けばいいですか?
takepieee

2016/10/21 01:37

htmlを分かりやすくidつけますね。 <table><tr> <td><a href="#" id="hoge">Aくん</a></td> </tr> <table id="huga" style="display:none;"> <tr> <td>身長</td> </tr> <tr> <td>体重</td> </tr> <tr> <td>年齢</td> </tr> </table> その上でjQuery使います。 $(document).ready(function(){ $('#hoge').on('click', function() { $('#huga').show(); return false; }); }); これで単純に表示はすると思います。 return falseしているのはリンク先に飛ばないようにするためです。飛ばしていいのであれば外して下さい。 表示非表示を切り替えるのあればshowをtoggleに、フェードインさせて表示するのあればshowをfadeInにするなどしてください。
takepieee

2016/10/21 01:49

ああ、「個人ではなく全体」を勘違いしていたかもしれません。 例でいうAくんがたくさんいて、Zくんまでいる、それぞれ全部テーブルを持っている、という事ですか? 発想は同じです。 <button id="disp">全体を表示する</button> を追加し、Aくんと同じようにZくんまでいるとして、それを全部divやsection等で囲みます。 <div id="data" style="display:none;"> <table><tr> <td><a href="#" id="hogeA">Aくん</a></td> </tr> <table id="hugaA" style="display:none;"> <tr> <td>身長</td> </tr> <tr> <td>体重</td> </tr> <tr> <td>年齢</td> </tr> </table> : : <table><tr> <td><a href="#" id="hogeZ">Xくん</a></td> </tr> <table id="hugaZ" style="display:none;"> <tr> <td>身長</td> </tr> <tr> <td>体重</td> </tr> <tr> <td>年齢</td> </tr> </table> </div> その上で同じ処理をすればいいだけです。 $('#disp').on('click', function() { $('#data').show(); });
aba623ky

2016/10/21 09:01

説明不足ですみません。 そのコードのidをユニークにしたものが知りたかったんです。
takepieee

2016/10/21 10:01

idは当然ユニークでなくてはいけませんが、 「ユニークにしたもの」とは何でしょうか?
aba623ky

2016/10/21 13:08

すみません、idを使ったものが知りたかったんです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問