- ベストアンサー
更新でランダムでページ内のテーブル変更
更新を押すたびにランダムでページ内のテーブルの中身を変更できるのでしょうか？
- sakurasuper
- お礼率16% (5/30)
- JavaScript
- 回答数8
- ありがとう数3
- みんなの回答 （8）
- 専門家の回答
質問者が選んだベストアンサー
確認してくださ～い！変わったところは、 １．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=================================
その他の回答 (7)
- lonlysheep
- ベストアンサー率56% (29/51)
まだ質問を締め切らないようですが、問題は解決したのでは？？？
- lonlysheep
- ベストアンサー率56% (29/51)
そうですね。初めはサンプルをコピーしてきて１ケ所いじっては確認して、 １ケ所いじっては確認してを繰り返してました。それでわけの分からない イベントハンドラやメソッドなどを、勉強系のサイトで調べてました。 書籍は一冊も買ったことがないですけど、JavaScriptに関してはネットで 十分情報が得られると思います。お互いにがんばりましょう！ 私が日ごろお世話になっているサイトです。 [勉強系] http://www5a.biglobe.ne.jp/~n_rieko/javascript/index.htm http://members.jcom.home.ne.jp/kiryo/index2.html [サンプル系] http://allabout.co.jp/computer/javascript/subject/msub_001022020.htm http://www2.ocn.ne.jp/~sugachuu/JavaScript/index3.html http://plaza14.mbn.or.jp/~hiro628/prg/prgj00javascript.htm 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>
- lonlysheep
- ベストアンサー率56% (29/51)
もといバージョンで。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を習得されました？ やはり、サンプルなどをいじってでしょうか？ もしよろしければ教えて頂ければと思います。
- lonlysheep
- ベストアンサー率56% (29/51)
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などでも対応させるには、 ＡＳＰとかでないとダメなんでしょうか？
- lonlysheep
- ベストアンサー率56% (29/51)
なるほど、楽天見ました。が、あれはデータベースを利用したサーバ側の処理 のようです。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でも対応してるのってないですかね？
- lonlysheep
- ベストアンサー率56% (29/51)
テキストということで、こんなんでどうでしょうか？ =============================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ではむりなのでしょうか？
- lonlysheep
- ベストアンサー率56% (29/51)
具体的にどういうことをしたいのでしょうか？ 静的なページであれば、JavaScriptでRandom関数とifで表示・非表示の切り替えをすれば済みそうだけど。。。 動的なページであれば、データベースからASPやPHPなどでデータを読み込む時にランダムに読み込めばできるかと思います。
補足
静的なページで、画像ではなくテーブルにはいったテキストなどを変更したいのですが・・・・
お礼
完璧でした。いろいろありがとうございました。 今後は、JavaScript勉強します。 サイトまで教えて頂き感謝しています。