- 締切済み
[JavaScript]Table内の文字列書換
下記のようにTableを作り、上に場所名、下に画像を貼り JavaScriptで反時計回りに定期的に場所名と画像の位置を変えるプログラムを作成しています。 画像位置を変えることはできたのですが、文字列を変えることができません。 どなたかご教示ください。 ===================================== | 場所A | 場所B | ================= =================== | | | | | 画像B | | | | | 画像 A =================== | | 場所C | | =================== | | | | | 画像C | | | | | =================== | | 場所D | | =================== | | | | | 画像D | | | | ===================================== <HTML> <HEAD> <TITLE>TEST</TITLE> <META HTTP-EQUIV="content-type" CONTENT="text/html;charset=UTF-8"> <META HTTP-EQUIV="refresh" CONTENT="50"> </HEAD> <BODY BGCOLOR="000000" TEXT="#FFFFFF"> <table ALIGN="CENTER" border="5" > <tr><td>A</td><td>B</td></tr> <tr><td rowspan=5><IMG SRC="A.jpg" NAME="SP1"><SCRIPT language="javaScript"> <!-- var NO1=1,NO2=2,NO3=3,NO4=4; img=new Array(4) img[1]="A.jpg" img[2]="B.jpg" img[3]="C.jpg" img[4]="D.jpg" UP(); function UP() { setTimeout("UP()",10000); document.SP1.src=img[NO1]; document.SP2.src=img[NO2]; document.SP3.src=img[NO3]; document.SP4.src=img[NO4]; NO1++; NO2++; NO3++; NO4++; if(NO1>4){NO1=1;} if(NO2>4){NO2=1;} if(NO3>4){NO3=1;} if(NO4>4){NO4=1;} } //--> </SCRIPT> </td> </td> <td><IMG SRC="B.jpg" NAME="SP2"</td></tr> <tr><td">C</td></tr> <tr><td><IMG SRC="C.jpg" NAME="SP3"></td></tr> <tr><td>D</td></tr> 一部省略 </table> </body> </ht
- sukapotan
- お礼率87% (7/8)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
tableの構成が説明の図でもソースをみてもいまいちわかりかねますが、勝手に1列目は画像が一つだけ、2列目に複数個のセットがあるものと仮定して… ２列形式限定版でこんなのでは？ （innerHTMLでバッサリ置換えています） （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> img { width:200px; height:100px; } </style> </head> <body> <table id="target" border="5" > <tr><td>A</td><td>B</td></tr> <tr> <td rowspan=5><img src="A.jpg" alt="A"></td> <td><img src="B.jpg" alt="B"></td> </tr> <tr><td>C</td></tr> <tr><td><img src="C.jpg" alt="C"></td></tr> <tr><td>D</td></tr> <tr><td><img src="D.jpg" alt="D"></td></tr> </table> <script type="text/javascript"> <!-- (function(){ var r, n, data = []; var tbl = document.getElementById("target"); var tcell = function(n, m){ return tbl.rows[n].cells[m]; } var get = function(n, m, k){ data[k] = [tcell(n, m).innerHTML, tcell(n+1, m).innerHTML]; } var set = function(n, m, k){ tcell(n, m).innerHTML = data[k][0]; tcell(n+1, m).innerHTML = data[k][1]; } //テーブル内のデータを取得 n = tbl.rows.length/2 | 0; for(r=0; r<n; r++) get(r*2, r?0:1, r); get(0, 0, n); //反時計回りにセット var id = setInterval(function(){ data.push(data.shift()); for(var i=0; i<n; i++) set(i*2, i?0:1, i); set(0, 0, n); }, 10000); })(); //--> </script> </body> </html> ご提示のソースでは、開始タグと終了タグの関係やスクリプトの位置が妙なので再確認されたほうがよろしいかと。
お礼
御回答ありがとうございました。 記載してあるtable図を確認したらわけのわからないものになっていました。 記入時には下記のようなtableしていたはずなのですが、 あまり確認もせず載せてしまいました。 それでも答えて頂き、非常に感謝しております。 非常に参考になりました。 機会がありましたら、またよろしくお願いいたします。 ===================================== | 場所A | 場所B | ==================================== | | | | | 画像B | | | | | 画像A ================== | | 場所C | | ================== | | | | | 画像C | | | | | ================== | | 場所D | | ================== | | | | | 画像D | | | | ======================================