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

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

ただいまの
回答率

88.10%

表示切替ボタンを実装したい

受付中

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,838

score 63

例えば「リンク1をクリックする→結果1が表示される」を
「リンク10をクリックする→結果10が表示される」
までで切るのですが、これをリンク10個分作るのではなく、リンク一個でリンク10個分表示されるhtmlを書きたいのですが、リンク一個でリンク10個分を表示しようとすると、リンク一個分しか表示されません。リンク10個分を表示するにはどうすればいいですか?
10個表示切替が出てクリックして表示非表示する方法が知りたいんです。ですが、僕が使うコードは、webapi のコードなので、普通のコードと違って自分で地道にtableのhtmlを書くことができないんです。一つのtableのhtmlを書けば、リクエストパラメータで10件リクエストを送ると、10件分のtableが育成されるんです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • jm1156

    2016/11/01 08:15

    あなたがどこで詰まっているのかわからないです。ソースコードを提示してください。毎回同じこと言われてると思うのですが、なぜコードを提示しないのでしょうか?

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/11/01 09:12

    まず日本語勉強してから来てください。質問内容が毎回曖昧なので。

    キャンセル

  • 退会済みユーザー

    2016/11/01 12:33

    こちらの質問が他のユーザから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

回答 4

+6

とりあえずこれ読んどいて
リンク内容

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

一つのリンクで複数のタブもしくはウィンドウを表示させたいという質問ですか?

もしそうであれば同じ質問が最近ありましたので以下を参考に
https://teratail.com/questions/52921

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:21

    すいません、私へのレスではなく質問に追記お願いします。
    その方がより多くの方から回答いたけると思います。
    私へのレスをそのコピペで貼る程度でいいので質問文のほうへ、、、

    キャンセル

  • 2016/10/31 18:42

    分かりました。

    キャンセル

  • 2016/11/01 11:23

    To: aba623ky さん

    > 少し僕のと違います。
    違うと思うのならそれでもいいですが、回答を貰っておいて放置するのはいかがなものでしょうか。
    https://teratail.com/questions/52794

    キャンセル

+1

APIとか難しい事はなくして質問したいことは
一つのボタンで10個のテーブル内容を全て表示・非表示にしたい
ただtableはphpのfor each文で10個作成する
ぐらいの事でいいのではないのかな

19:14追記
JavaScriptで、html上のとあるclassを持つ要素を軒並み非表示にしたいとき

11/01 8:20
動作を他人でも確認できるように

<!DOCTYPE html>
<html>
<head>
<script>
function show_block(){
    var element = document.getElementsByClassName("hoge");
    for (var i=0;i<element.length;i++) {
        if(element[i].style.display =="none"){
             element[i].style.display = "block";
        }else{
          element[i].style.display = "none";
        }
    }
}
</script>
</head>
<body>
    <input type="button" onclick="show_block()" value="表示切替">
<table border="1" class="hoge" id="hoge1">
    <tr>
        <td>chouchou シュシュ</td>
    </tr>
    <tr>
        <td>139.735923551435.6876048451</td>
    </tr>
    <tr>
        <td>東京都千代田区六番町3-11  テシコ六番町ビル 2F</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge2">
    <tr>
        <td>北海道 池袋西口店</td>
    </tr>
    <tr>
        <td>139.708707784135.7297002089</td>
    </tr>
    <tr>
        <td>東京都豊島区西池袋1-10-8 サン・グロウビル3F</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge3">
    <tr>
        <td>ワイン居酒屋 ワイのすけ</td>
    </tr>
    <tr>
        <td>139.757721240035.6644644218</td>
    </tr>
    <tr>
        <td>東京都港区新橋4-19-4 コンシェリア新橋B1</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge4">
    <tr>
        <td>大衆酒場 ちばチャン 渋谷店</td>
    </tr>
    <tr>
        <td>139.698536952735.6612359822</td>
    </tr>
    <tr>
        <td>東京都渋谷区宇田川町13-8 ちとせ会館4F</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge5">
    <tr>
        <td>琉歌 りゅうか 上野本店</td>
    </tr>
    <tr>
        <td>139.774045532335.7097733686</td>
    </tr>
    <tr>
        <td>東京都台東区上野4-8-10 第3 SEIKA BLD123</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge6">
    <tr>
        <td>SU・KU・RA サクラ 赤羽東口店</td>
    </tr>
    <tr>
        <td>139.721910807135.7784928403</td>
    </tr>
    <tr>
        <td>東京都北区赤羽1-3-7 大澤ビル2階</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge7">
    <tr>
        <td>BEONE ベオーネ 新宿店</td>
    </tr>
    <tr>
        <td>139.702236729435.6935946592</td>
    </tr>
    <tr>
        <td>東京都新宿区歌舞伎町1-16-1 東京第20ビル7F</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge8">
    <tr>
        <td>ハヌリ 新宿歌舞伎町ゴジラ通り</td>
    </tr>
    <tr>
        <td>139.701693956535.6946214735</td>
    </tr>
    <tr>
        <td>東京都新宿区歌舞伎町1-18-9-9F</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge9">
    <tr>
        <td>十米 新橋SL広場駅前店</td>
    </tr>
    <tr>
        <td>139.757333969035.6665005712</td>
    </tr>
    <tr>
        <td>東京都港区新橋2-16-1 ニュー新橋ビル203</td>
    </tr>
</table>
<table border="1" class="hoge" id="hoge10">
    <tr>
        <td>月島スペインクラブ</td>
    </tr>
    <tr>
        <td>139.782315209135.6658040954</td>
    </tr>
    <tr>
        <td>東京都中央区月島1-14-7旭倉庫1F</td>
    </tr>
</table>
</body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/31 18:20

    そのコードを教えて下さい。

    キャンセル

  • 2016/10/31 18:21

    for each
    <table>
    ・・・
    </table>を10個分作るのですか?

    キャンセル

  • 2016/11/01 00:11

    これをどうやってhtmlに組み込めばいいのですか?

    キャンセル

  • 2016/11/01 08:25

    まずはAPIコードを持ってない人にも作ってもらえるようにHTMLコードのみ
    この動作違うのなら、文章ではなく実際のtableをPHP部分なしで見せて

    キャンセル

+1

一つのテーブルに10個の内容突っ込んだら表示できませんか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る