javascriptで画像をテーブルに出力する方法

解決済

質問者：sen-mac
質問日時：2010/12/08 10:59
回答数：2件

javascriptで定期的に入れ替えている画像をテーブルに出力（表示）する方法を教えてください。

<html>
<head>
<script language="JavaScript"></script>

<img src="img0.jpg" width="200" height="200" name="myFormImg" />

<script language="JavaScript"></script>
</head>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yyr446
回答日時：2010/12/08 13:45

</head>の上に<img>があるのは何かの間違いとして、

画像をテーブルに出力（表示）の意味を素直に解釈して、
表示したい場所が、<th></th>か<td></td>か知らんけど

<table>
<tr><th>画像</th></tr>
<tr><td id="kokonigazo"></td></tr>
<tbody>
</tbody>

だったら、

var img = document.createElement("img");
img.src = myImage[myNowCnt];
img.alt = "";
img.name = "myFormImg";
img.width = 200;
img.height = 200;

document.getElementById("kokonigazo").appendChild(img.cloneNode(true));

※テーブルだったらrowIndexとcellIndexででも場所を特定できるけど．．

- 0
- 件

通報する

No.1

回答者： fujillin
回答日時：2010/12/08 13:23

＞画像をテーブルに出力（表示）する方法を教えてください。

ご提示の<img>要素がテーブルの中にあって、それを入替えたいという意味でしょうか？
あるいは、用意している画像全体を表（テーブル）として表示したいという意味でしょうか？

とりあえず、前者であれば同じ方法で可能ですが、要素の指定をid指定などにしておいたほうが確実と思われます。
<table><tr>
　・・・・・
<td><img src="xxx" id="myFormImg"></td>
　・・・・・
</tr></table>

表示する部分のスクリプトを
document.getElementById("myFormImg").src = myImage[myNowCnt];
にかえるとかでいけませんか？

後者の場合だと、何行（あるいは何列）にするかなどの指定がありませんが、
以下、2列（=iの繰返し数）の場合の大雑把なサンプル。
var t = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var img = document.createElement("img");
var count = 0, leng=myImage.length;
var i, er, ed, eimg, col = 2; // col:列数

while(count < leng) {
　er = tr.cloneNode(false);
　t.appendChild(er);
　for (i=0; i<col; i++) {
　　ed = td.cloneNode(false);
　　er.appendChild(ed);
　　if (count < leng) {
　　　eimg = img.cloneNode(false);
　　　eimg.src = myImage[count];
　　　eimg.alt = myImage[count++];
　　　ed.appendChild(eimg);
　　}
　}
}
document.getElementsByTagName("body")[0].appendChild(t);