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

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

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

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1937閲覧

JSでfor文繰り返してテーブルを作ってる時に画像を貼り付けたい

tukituki

総合スコア22

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/06/30 03:18

編集2018/06/30 03:50

前提・実現したいこと

Javasprictでfor文繰り返してテーブルを作成してるときに、そのtdテーブルごとに画像を貼り付けたいです。

JS

1 //テーブル作成 2 var table = document.getElementById("table"); 3 4 for (var i = 0; i < 1; i++) { 5 var tr = document.createElement("tr"); 6 for (var j = 0; j < 4 ; j++) { 7 var td = document.createElement("td"); 8 td.className = "tile"; 9 td.number = j; 10 td.id = j; 11 td.onclick = click; 12 tr.appendChild(td); 13 } 14 table.appendChild(tr); 15 }

こんな感じで私は4つのtdを作成していますが、この各tdに画像を表示したいです。
イメージ説明

(↑各td)

発生している問題・エラーメッセージ

エラーはでてません。

該当のソースコード

Js

1 <script> 2 "use strict"; 3 4 function init() { 5 //テーブル作成 6 var table = document.getElementById("table"); 7 8 for (var i = 0; i < 1; i++) { 9 var tr = document.createElement("tr"); 10 for (var j = 0; j < 4 ; j++) { 11 var td = document.createElement("td"); 12 td.id = "a"+j; 13 tr.appendChild(td); 14 } 15 table.appendChild(tr); 16 } 17 } 18 19 20 </script> 21</head> 22<body onload="init()"> 23 <table id="table"></table> 24 <img id="a0" src="joy.jpg"/> 25 <img id="a1" src="joy.jpg"/> 26 <img id="a2" src="joy.jpg"/> 27 <img id="a3" src="joy.jpg"/> 28 29</body>

試したこと

js

1 <img id="a0" src="joy.jpg"/> 2 <img id="a1" src="joy.jpg"/> 3 <img id="a2" src="joy.jpg"/> 4 <img id="a3" src="joy.jpg"/>

と入力しましたが表示できませんでした。

補足情報(FW/ツールのバージョンなど)

tr4つくらいならHTMLで<img>を使えばいいとなるかもしれませんが、それではプログラム的に都合が悪いので、Javasprictから操作がしたいです。

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

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

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

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

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

guest

回答3

0

ベストアンサー

こんにちは。

ご質問に挙げられているコード

javascript

1for (var j = 0; j < 4 ; j++) { 2 var td = document.createElement("td"); 3 td.id = "a"+j; 4 tr.appendChild(td); 5} 6

で作成している td に対して、 createElement("img") で作成したimg要素を
appendChildすればよいです。

以下に、簡単なサンプルを作成しました。

https://jsfiddle.net/jun68ykt/t8h4vnmo/33/

上記のサンプルの中で、以下の箇所で td に imgを追加しています。

javascript

1 var img = document.createElement("img"); 2 img.src = "https://dummyimage.com/200x150/" + colors[j].value + "/000000&text=" + colors[j].name; 3 td.appendChild(img);

なお、img.srcに代入しているURLは dummyimage.com を使っています。

以上、参考になれば幸いです。

投稿2018/06/30 03:52

編集2018/06/30 04:21
jun68ykt

総合スコア9058

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

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

takyafumin

2018/06/30 04:28

> なお、img.srcに代入しているURLは dummyimage.com を使っています。 おお、こんなサービスがあるのですね。勉強になりました。ありがとうございます。
jun68ykt

2018/06/30 04:32

> takyafuminさん コメントありがとうございます。 何かの開発中にとりあえずダミーの画像を当て込んでおきたいとき、dummyimage.com は便利です。
tukituki

2018/06/30 04:43

丁寧にコードまで書いてくれてとても分かりやすかったです。解決しましたありがとうございます! テーブルを作成するようにcreateElementで作ってappendChildで貼り付ければ画像も同じ要領で表示できるのですね。勉強になりました!
jun68ykt

2018/06/30 04:46

> tukitukiさん 解決されたとのことで、よかったです!
guest

0

display:none 指定してたら表示されないのは当然ですよ。

この各tdに画像を表示したい

画像などで完成イメージを提示されたほうが良いです。これだけでは「どこに」「どう」というところがわかりません。

追記:
ID,classは数字から開始しないようにしてください。

5.必ずアルファベットから開始する。(数字から開始しない)

数字から開始しているid・class名は、認識されません。

投稿2018/06/30 03:33

m.ts10806

総合スコア80765

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

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

tukituki

2018/06/30 03:52

ご指摘ありがとうございます。画像とIDを変更しました。
m.ts10806

2018/06/30 03:55 編集

createElementを使えているようですしそれでimg作ってID与えてtdのinnerhtmlかappendで設置すればいいだけのように思います。
guest

0

<img>タグの『style="display:none" 』については、どのような動作を指定しているか、ご理解されていますか?

<table>タグ内の<td>として画像を表示させたいようであれば、現在ループ処理で<table>を作成している箇所に、新たに画像表示用の<td>タグと、その<td>タグに<img>タグを追加すればご希望の動作になります。 くれぐれも<img>タグに「style="display:none"」を指定しないようにご注意ください。

投稿2018/06/30 03:33

takyafumin

総合スコア2335

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問