ユーザーが選択した部分の詳細を同じページに表示する方法

お世話になっております。

Jquery (JS)に未だなれていないため、そのような機能を持つライブラリはないかという趣旨で質問をさせて頂きます。

現状、作成しているページでは大きく分けてdiv1とdiv2があり具体的にdiv1にはテーブルが存在しております。例えば以下のようなものです。

会社名    従業員数  所在地    詳細を見る
A company    100        千代田区   選択
B company    200        渋谷区    選択

この選択をクリックすれば、
①それぞれのレコードの詳細な情報を同じページ内のdiv2に移動せずに表示させる。（div1が単純ではないので、タブ切り替えの方法は使用しない予定です。）
②同じページ内でdiv2ではなく、背景がグレイアウトし浮かび上がらせるように表示させる。（うまく言葉で表現できないのですが、たまにwebpageを見ているとユーザーが選択するとそのようにできるサイトがあり、またもとのブラウザ本体をクリックすると浮かび上がったものが消えてくれるような仕組みです）

これらを実装できるようなJquery等のライブラリについて、ご存知の方ご教示をいただければ幸いです。
言葉足らずで申し訳ございませんが、
不足があれば加筆いたします。

宜しくお願い申し上げます。

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

回答1件

ベストアンサー

順番前後しますが。
2：「モーダルウィンドウ」で検索してみてください。色々あります。

1：ライブラリとか使うレベルではないです。
下記のような単純な記述で実現出来ます。

HTML
1<html>
2<head>
3<style typt="text/css">
4.hide {
5    display:none;
6}
7</style>
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
9<script>
10$(document).ready(function() {
11    //ボタンがクリックしたら発動
12    $('input.button').click(function() {
13        //表示する詳細データの<div>
14        var target = $('div.body[data-target-id='+$(this).data('target-id')+']');
15
16        //詳細が非表示なら表示する(ついでにボタンのラベルも変更)
17        if(target.hasClass('hide')) {
18            target.removeClass('hide');
19            $(this).val('解除');
20
21        //詳細が表示されてたら非表示に戻す(ボタンも)
22        } else {
23            target.addClass('hide');
24            $(this).val('選択');
25        }
26
27        //<form>で囲まれたボタンなら、submit防止しとく
28        return false;
29    });
30});
31</script>
32</head>
33<body>
34<table>
35    <tr>
36        <th>会社名</th>
37        <th>従業員数</th>
38        <th>所属値</th>
39        <th>詳細を見る</th>
40    </tr>
41    <tr class="header" id="head1">
42        <td>A company</td>
43        <td>100</td>
44        <td>千代田区</td>
45        <td><input type="button" data-target-id="head1" class="button" value="選択"></td>
46    </tr>
47    <tr class="header" id="head2">
48        <td>B company</td>
49        <td>200</td>
50        <td>渋谷区</td>
51        <td><input type="button" data-target-id="head2" class="button" value="選択"></td>
52    </tr>
53</table>
54<div class="body hide" data-target-id="head1">
55    head1の詳細情報
56</div>
57<div class="body hide" data-target-id="head2">
58    head2の詳細情報
59</div>
60</body>
61</html>

投稿2016/10/14 08:14

kunai

総合スコア5405

SugiuraY

2016/10/15 05:18

ご回答をいただき、ありがとうございます。あの仕組みはモーダルウィンドウと呼ぶのですね、たくさん出てきました！また、１番について出したり消したりするのは、https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.jsはライブラリではないのでしょうか？コードをご記載頂き、ありがとうございます。ただ、実際には２個目を選択した場合、一個めに消えて欲しいので（常に表示するのは１つ）細かい仕様を作りこみたいのですが、どこのサイトを見れば良いのかがわかりませんでした。。。不案内で申し訳御座いませんがよろしくお願い申し上げます。

kunai

2016/10/17 01:31

jquery.min.jsは、jQueryの本体です。jQueryの機能やjQueryベースのライブラリを使用する場合は必ずコレが必要になります。 jQuery使わなくても、純粋なJavaScriptの記法で書いても大した違いはありませんけどね。常に開く詳細は一つ、と言うのであれば、 if(target.hasClass('hide')) { の下に $('div.body').addClass('hide'); $('input.button').val('選択'); の2行を入れればいい感じになると思います。一度すべての詳細を消してから、出したいモノだけ出す感じですね。モーダルウィンドウのライブラリを使うにしても、この程度のjQueryは使えるようになっていた方が細かな調節が出来て便利だと思いますよ。

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