![](\"joy.jpg\"/)
\r\n 
Q&A
ご指摘ありがとうございます。画像とIDを変更しました。
前提・実現したいこと
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/ツールのバージョンなど）
tr４つくらいならHTMLで<img>を使えばいいとなるかもしれませんが、それではプログラム的に都合が悪いので、Javasprictから操作がしたいです。
回答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
総合スコア9058
0
display:none 指定してたら表示されないのは当然ですよ。
この各tdに画像を表示したい
画像などで完成イメージを提示されたほうが良いです。これだけでは「どこに」「どう」というところがわかりません。
追記：
ID,classは数字から開始しないようにしてください。
５．必ずアルファベットから開始する。（数字から開始しない）
数字から開始しているid・class名は、認識されません。
投稿2018/06/30 03:33
総合スコア80890
createElementを使えているようですしそれでimg作ってID与えてtdのinnerhtmlかappendで設置すればいいだけのように思います。
0
<img>タグの『style="display:none" 』については、どのような動作を指定しているか、ご理解されていますか？
<table>タグ内の<td>として画像を表示させたいようであれば、現在ループ処理で<table>を作成している箇所に、新たに画像表示用の<td>タグと、その<td>タグに<img>タグを追加すればご希望の動作になります。 くれぐれも<img>タグに「style="display:none"」を指定しないようにご注意ください。投稿2018/06/30 03:33
総合スコア2335
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/30 04:28
2018/06/30 04:32
2018/06/30 04:43
2018/06/30 04:46