【大喜利】【投稿～9/7】 ロボットの住む世界で流行ってる罰ゲームとは？

[JavaScript]Table内の文字列書換

締切済

  • 質問者：sukapotan
  • 質問日時：
  • 回答数：1件

下記のように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

通報する

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

質問の本文を隠す

A 回答 (1件)

No.1

  • 回答者： fujillin
  • 回答日時：

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>

ご提示のソースでは、開始タグと終了タグの関係やスクリプトの位置が妙なので再確認されたほうがよろしいかと。
    • good
    • 0
    • 件
通報する
この回答へのお礼

御回答ありがとうございました。
記載してあるtable図を確認したらわけのわからないものになっていました。
記入時には下記のようなtableしていたはずなのですが、
あまり確認もせず載せてしまいました。
それでも答えて頂き、非常に感謝しております。
非常に参考になりました。
機会がありましたら、またよろしくお願いいたします。
=====================================
|　　　　場所A　　　　|　　　　　場所B　　　　　|
====================================
|　　　　　　　　　　　　 |　　　　　　　　　　　　　　|
|　　　　　　　　　　　　 |　　　　　画像B　　　　　|
|　　 　　　　　　　　　　|　　　　　　　　　　　　　　|
|　　　　画像A　　　　 ==================
|　　　 　　　　　　　　　|　　　　　場所C　　　　　|
|　　　　　　　　　　　　　==================
|　　　 　　　　　　　　　|　　　　　　　　　　　　　　|
|　　 　　　　　　　　　　|　　　　　画像C　　　　　|
|　　　 　　　　　　　　　|　　　　　　　　　　　　　　|
|　　　　　　　　　　　　　==================
|　　　 　　　　　　　　　|　　　　　場所D　　　　　|
|　　　　　　　　　　　　　==================
|　　　 　　　　　　　　　|　　　　　　　　　　　　　　|
|　　　 　　　　　　　　　|　　　　　画像D　　　　　|
|　　　 　　　　　　　　　|　　　　　　　　　　　　　　|
======================================

通報する
お礼日時：2011/04/06 09:46

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報