プロが教える店舗＆オフィスのセキュリティ対策術

更新でランダムでページ内のテーブル変更

解決済

  • 質問者：sakurasuper
  • 質問日時：
  • 回答数：8件

更新を押すたびにランダムでページ内のテーブルの中身を変更できるのでしょうか？

通報する

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

質問の本文を隠す

A 回答 (8件)

No.7ベストアンサー

  • 回答者： lonlysheep
  • 回答日時：

確認してくださ～い！変わったところは、


１．link関数を追加しました。
２．表示最大数の「i」の設定を上のほうに持っていきました。
=============================Sample=================================
<html>
<head>
<script language='JavaScript'>
<!--
var i = 5; //表示件数の最大値
var brows;

function write(num){
if(document.getElementById || document.all){ //NN6,7 , Mozilla , IE4,5,6,7
brows=0;
document.write("<DIV ID='v" +num+ "' style='position:relative;display:none;'>");
}else if(document.layers){ //NN4
brows=1;
document.write("<DIV ID='v" +num+ "' style='position:absolute;visibility:hidden;'>");
}
}

function link(linkNo){
var count;
if(brows==0) {
for(count=0;count<=i;count++){
document.getElementById('v' + count).style.display='none';
}
document.getElementById(linkNo).style.display='block';
} else {
for(count=0;count<=i;count++){
document.layers['v' + count].visibility='hidden'
}
document.layers[linkNo].visibility='show'
}
}
//-->
</script>
<title></title>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(0);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン0
</TD>
</TR>
</TABLE>
</DIV>


<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(1);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン1
</TD>
</TR>
</TABLE>
</DIV>


<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(2);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン2
</TD>
</TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(3);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン3
</TD>
</TR>
</TABLE>
</DIV>



<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(4);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン4
</TD>
</TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(5);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン5
</TD>
</TR>
</TABLE>
</DIV>

<br>

<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="JavaScript:link('v0')">パターン０へ</a></td>
<td><a href="JavaScript:link('v1')">パターン１へ</a></td>
<td><a href="JavaScript:link('v2')">パターン２へ</a></td>
<td><a href="JavaScript:link('v3')">パターン３へ</a></td>
<td><a href="JavaScript:link('v4')">パターン４へ</a></td>
<td><a href="JavaScript:link('v5')">パターン５へ</a></td>
</tr>
</table>

<script language='JavaScript'>
<!--
var rn = Math.floor(Math.random() * (i+1)); //乱数発生
var j = "v" + rn ;
if(brows==0)
document.getElementById(j).style.display='block'
else
document.layers[j].visibility='show'
//-->
</script>
</body>
</html>
=============================Sample=================================
    • good
    • 0
    • 件
通報する
この回答へのお礼

完璧でした。いろいろありがとうございました。
今後は、JavaScript勉強します。
サイトまで教えて頂き感謝しています。

通報する
お礼日時：2003/02/19 23:07

No.8

  • 回答者： lonlysheep
  • 回答日時：

まだ質問を締め切らないようですが、問題は解決したのでは？？？

    • good
    • 0
    • 件
通報する

No.6

  • 回答者： lonlysheep
  • 回答日時：

そうですね。

初めはサンプルをコピーしてきて１ケ所いじっては確認して、
１ケ所いじっては確認してを繰り返してました。それでわけの分からない
イベントハンドラやメソッドなどを、勉強系のサイトで調べてました。

書籍は一冊も買ったことがないですけど、JavaScriptに関してはネットで
十分情報が得られると思います。お互いにがんばりましょう！

私が日ごろお世話になっているサイトです。
[勉強系]
http://www5a.biglobe.ne.jp/~n_rieko/javascript/i …
http://members.jcom.home.ne.jp/kiryo/index2.html

[サンプル系]
http://allabout.co.jp/computer/javascript/subjec …
http://www2.ocn.ne.jp/~sugachuu/JavaScript/index …
http://plaza14.mbn.or.jp/~hiro628/prg/prgj00java …
http://www.sumnet.ne.jp/domp/jsbs/

この回答への補足

すみません本当に最後に質問があるんですけど、
下記のようにサンプルを追加しましたが、
ランダムで出て来るテーブルにリンクははれるのでしょうか？
ご教授お願いします。



<html>
<head>
<script language='JavaScript'>
<!--
var brows;
function write(num){
if(document.getElementById || document.all){ //NN6,7 , Mozilla , IE4,5,6,7
brows=0;
document.write("<DIV ID='v" +num+ "' style='position:relative;display:none;'>");
}else if(document.layers){ //NN4
brows=1;
document.write("<DIV ID='v" +num+ "' style='position:absolute;visibility:hidden;'>");
}
}
//-->
</script>
<title></title>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(0);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン0
</TD>
</TR>
</TABLE>
</DIV>


<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(1);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン1
</TD>
</TR>
</TABLE>
</DIV>


<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(2);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン2
</TD>
</TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(3);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン3
</TD>
</TR>
</TABLE>
</DIV>



<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(4);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン4
</TD>
</TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(5);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff" width=400 height=100>
<TR>
<TD>
パターン5
</TD>
</TR>
</TABLE>
</DIV>

<br>


<table width="480" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>パターン０へ</td>
<td>パターン１へ</td>
<td>パターン２へ</td>
<td>パターン３へ</td>
<td>パターン４へ</td>
</tr>
</table>



<script language='JavaScript'>
<!--
var i = 5; //表示件数の最大値
var rn = Math.floor(Math.random() * (i+1)); //乱数発生
var j = "v" + rn ;
if(brows==0)
document.getElementById(j).style.display='block'
else
document.layers[j].visibility='show'
//-->
</script>
</body>
</html>

補足日時：2003/02/19 16:15
通報する
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： lonlysheep
  • 回答日時：

もといバージョンで。

NN4.73、NN7、IE6で確認しましたが、MacIEについては
手元にないので、そちらで確認してみてくださいね。
ちょっと複雑になってしまったかな。。。
１．読込初めにブラウザチェックして、それに合わせたタグを認識させる
２．読込終わりにランダムにあるテーブルのみを表示可にする
といった感じです。
=============================Sample=================================
<html>
<head>
<script language='JavaScript'>
<!--
var brows;
function write(num){
if(document.getElementById || document.all){ //NN6,7 , Mozilla , IE4,5,6,7
brows=0;
document.write("<DIV ID='v" +num+ "' style='position:relative;display:none;'>");
}else if(document.layers){ //NN4
brows=1;
document.write("<DIV ID='v" +num+ "' style='position:absolute;visibility:hidden;'>");
}
}
//-->
</script>
<title></title>
</head>
<body>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(0);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff">
<TR>
<TD>
パターン0
</TD>
</TR>
</TABLE>
</DIV>
・
（～中略～）
・
<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(4);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff">
<TR>
<TD>
パターン4
</TD>
</TR>
</TABLE>
</DIV>

<SCRIPT LANGUAGE="JavaScript">/*<!--*/write(5);/*-->*/</SCRIPT>
<TABLE bgcolor="#ffaaff">
<TR>
<TD>
パターン5
</TD>
</TR>
</TABLE>
</DIV>

<script language='JavaScript'>
<!--
var i = 5; //表示件数の最大値
var rn = Math.floor(Math.random() * (i+1)); //乱数発生
var j = "v" + rn ;
if(brows==0)
document.getElementById(j).style.display='block'
else
document.layers[j].visibility='show'
//-->
</script>
</body>
</html>
=============================Sample=================================

この回答への補足

無事、IE、NN、macIEで動作確認できました。
ありがとうございました。感謝しています。

lonlysheepさんは、どの様にしてJavaScriptを習得されました？
やはり、サンプルなどをいじってでしょうか？
もしよろしければ教えて頂ければと思います。

補足日時：2003/02/19 10:18
通報する
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： lonlysheep
  • 回答日時：

visibilityバージョンで。

displayはNN6以降しか対応していないみたいです。
一応これで、NN4.x、NN6、IEには対応したはず(!)です（^^;）
が、全部は確認してないので試してみてくださいね。
=============================Sample=================================
<html>
<head>
<title></title>
</head>
<body>
<DIV ID = "v0" style="position:relative;visibility:hidden;">
<TABLE bgcolor="#ffaaff">
<TR>
<TD>
パターン０
</TD>
</TR>
</TABLE>
</DIV>
・
・～中略～
・
<DIV id="v5" style="position:relative;visibility:hidden;">
<TABLE bgcolor="#ffaaff">
<TR>
<TD>
パターン５
</TD>
</TR>
</TABLE>
</DIV>

<script language='JavaScript'>
<!--
var i = 5; //表示件数の最大値
var j = Math.floor(Math.random() * (i + 1)); //乱数発生
j = "v" + j; //文字列化
if(document.getElementById) //NN6,Mozilla,IE5
document.getElementById(j).style.visibility='visible'

else if(document.all) //IE4,5,6
document.all(j).style.visibility='visible'

else if(document.layers) //NN4
document.layers[j].visibility='show'
//-->
</script>
</body>
</html>
=============================Sample=================================

この回答への補足

すいません、何度もお返事頂いて。感謝しています。
早速、ためして見ました。

自分がvisibilityを使ってみたらなんていってしまいましたが
以前（03-02-17 23:51）の形での見え方が一番ベストです。
見え方が一番重要なんです。わがままいってすみません。
ネスケ7.0で、以前（03-02-17 23:51）を起動させて見ましたが、
なにも表示されませんでした。
displayはNN6以降で対応しているのでしょうか？

最終的にネスケ又は、マックIEなどでも対応させるには、
ＡＳＰとかでないとダメなんでしょうか？

補足日時：2003/02/18 17:57
通報する
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： lonlysheep
  • 回答日時：

なるほど、楽天見ました。

が、あれはデータベースを利用したサーバ側の処理
のようです。JavaScriptでも静的なものであれば以下のようにできます。
=============================Sample=================================
<html>
<head>
<title></title>
</head>
<body>

<DIV id="0" style="display:none">
<TABLE bgcolor="##ffaaff">
<TR>
<TD>
パターン０
</TD>
</TR>
</TABLE>
</DIV>
・
・
～ 中略 ～
・
・
<DIV id="5" style="display:none">
<TABLE bgcolor="##ffaaff">
<TR>
<TD>
パターン５
</TD>
</TR>
</TABLE>
</DIV>

<script language='JavaScript'>
<!--
var i = 5;//表示件数の最大値
var j = Math.floor(Math.random() * i); //乱数発生
j = String(j);//文字列化
document.all(j).style.display=''; //j番目を表示させる
-->
</script>
</body>
</html>
=============================Sample=================================
１．それぞれのテーブルを<DIV></DIV>で囲み、idを重複しないようにつける
２．JavaScriptの「表示件数の最大値」を<DIV>の数にする

といった感じでよいでしょうか？

この回答への補足

ありがとうございます。
早速してみましたらできました。

しかし、displayは、Netscapeだと対応してないですよね。
visibilityを使用すれば大丈夫なんでしょうか？

Netscapeでも対応してるのってないですかね？

補足日時：2003/02/18 10:28
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： lonlysheep
  • 回答日時：

テキストということで、こんなんでどうでしょうか？



=============================Sample=================================
<html>
<head>
<title></title>
<script language='JavaScript'>
<!--
function Random(){
i = 10;//表示件数の最大値
var j = Math.random() * i;
if( j<=1 )
document.write("パターン１");
else if( j<=2 )
document.write("パターン２");
else if( j<=3 )
document.write("パターン３");
else if( j<=4 )
document.write("パターン４");
else if( j<=5 )
document.write("パターン５");
else if( j<=6 )
document.write("パターン６");
else if( j<=7 )
document.write("パターン７");
else if( j<=8 )
document.write("パターン８");
else if( j<=9 )
document.write("パターン９");
else
document.write("パターン１０");
}
//-->
</script>
</head>
<body>
<input type="button" name="change" value="更新" onClick="JavaScript:location.reload()">
<TABLE bgcolor="orange">
<TR>
<TD>
<SCRIPT LANGUAGE="JavaScript">/*<!--*/Random();/*-->*/</SCRIPT>
</TD>
</TR>
</TABLE>
</body>
</html>
=============================Sample=================================

リロードさせないでやる方法もありますが、ソースが長くなります。

この回答への補足

こんなソースまで書いて頂いて大変感謝しております。

ところでパターン１、パターン２に、例えば
document.write("
<table><tr><td>
パターン１
</td></tr></table>");

って無理じゃないですか。

どの様にすれば、楽天（http://www.rakuten.co.jp/）の
今日の特集みたいにかわるのでしょうか？
根本から違うんでしょうか？
JavaScriptではむりなのでしょうか？

補足日時：2003/02/17 20:38
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： lonlysheep
  • 回答日時：

具体的にどういうことをしたいのでしょうか？


静的なページであれば、JavaScriptでRandom関数とifで表示・非表示の切り替えをすれば済みそうだけど。。。
動的なページであれば、データベースからASPやPHPなどでデータを読み込む時にランダムに読み込めばできるかと思います。

参考URL：http://www2.ocn.ne.jp/~sugachuu/JavaScript/index …

この回答への補足

静的なページで、画像ではなくテーブルにはいったテキストなどを変更したいのですが・・・・

補足日時：2003/02/17 15:19
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報