Java Scriptのwrite()の結果：表を表示させる方法
- Java Scriptのwrite()を使用して、表を表示させる方法について教えてください。
- 例えば、上記のようなJava Scriptを作成し、Internet Explorerで実行すると表が表示されますが、他の方法でHTMLのスクリプトを表示させることはできるでしょうか？もしできる場合、その方法を教えてください。
- 以下のような表のHTMLスクリプトを表示させる方法を教えてください：<table border><tr><td>0</td><td>1</td><td>2</td></tr></table>
- ベストアンサー
java scriptのwrite()の結果
<script> document.write("<table border>"); document.write("<tr>"); for(i=0;i<3;i++){ document.write("<td>"+i+"</td>"); } document.write("</tr>"); document.write("</table>"); </script> 例えば上記のような Java Script を作ったとします。 Internet Explorer で実行すると表（ＨＴＭＬの結果？）が表示されますが、 そうでなく 以下のようなＨＴＭＬのスクリプトを表示させる事は できますか？ もしできるなら方法をお願いします。 <table border><tr><td>0</td><td>1</td><td>2</td></tr></table>
- anon256
- お礼率100% (783/783)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1です。 そういう変換を自動的に実施してwriteする関数を自分で作ればいいです。 (参考) http://d.hatena.ne.jp/reinyannyan/20060711/p1
その他の回答 (1)
- Lchan0211b
- ベストアンサー率61% (573/930)
「<」や「>」の文字をHTMLの制御記号と認識されないよう、 これらを文字参照形式で記述します。 (参考) http://ja.wikipedia.org/wiki/%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7 例えば"<table border>"の部分は "<table border>"と記述します。
お礼
ありがとうございます。その手がありましたね。 なのですが、これだといちいち、<を<に変換しなくちゃいけないですよね。 js を書きながら、ちゃんと思い通りのＨＴＭＬになっているかを 確認したいのです。 もう少しスマートな方法ありませんでしょうか？
関連するQ&A
- ScriptがTABLEタグの中に表示されません。
下記の様にScriptを使ってTABLEタグの中に表示させようと思ったのですが、test2.jsの「あれ？」がTABLEタグ欄に表示されません。 何方かご教授してもらえませんか？ ↓↓↓↓<HTML File>↓↓↓↓ <HTML><BODY> <script src="./test1.js"></script> </BODY></HTML> ↓↓↓↓<test1.js File>↓↓↓↓ document.open(); document.write("<TABLE border=1><TBODY><TR><TD>1</TD><TD>おや？<script src=\"./test2.js\"></script></TD></TR><TR><TD>1</TD><TD>1</TD></TR></TBODY></TABLE>"); document.close(); ↓↓↓↓<test2.js File>↓↓↓↓ document.open(); document.write("あれ？"); document.close();
- ベストアンサー
- JavaScript
- javascriptに関する質問です
９×９のます目一つ一つに・を表示させるプログラムをつくっているのですがなかなかうまくいきませんどなたかご教授ください <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>・の表</h1>"); document.write("<table border>"); var i; var j; for (i =・;i=<9 ){ document.write("<tr>"); for(j =・;j=<9 ){ document.write("<td>"); document.write(i * j) document.write("</td>") } document.write("</tr>"); } document.write("</table>"); //--> </script>
- ベストアンサー
- JavaScript
- n回繰り返し書き出す
例えば、 <TABLE border=1> <TR> <TD></TD> </TR> </TABLE> このような表を表示させたい場合、JavaScriptで <SCRIPT language="JavaScript"> <!-- document.write("<TABLE border=1><TR>"); document.write("<TD></TD>"); document.write("</TR></TABLE>"); --> </SCRIPT> このようにすると可能だと思うのですが、 <TABLE border=1> <TR> <TD></TD> <TD></TD> <TD></TD> </TR> </TABLE> このような場合や、あるいは <TD></TD> が20も30もあるような場合、最初の方法ですと、どうも非合理的に思えてなりませんし、 方法も絶対にあるようにも思えます。 このケースでいう、<TD></TD>をn回繰り返して表示させる。 というときには、どのように記述すればよいのでしょうか。 基本的なことを知らずに色々やってみているのですが、どうもわかりません。 おわかりになられる方、どうかご教授願います。
- ベストアンサー
- JavaScript
- VBスクリプト どこが間違っているのでしょうか？
こんにちは、いつもお世話になっています 今回大学のレポートで、アクセスすると九九の表を算出するプログラム（aspで）を作ることになりました。 途中まではなんとかやってみたものの行き詰ってしまいました！！ どこかが間違っているのだと思うのですがどこか全くわかりません…。 以下が実際にわたしが書いている<body>内です。 <body> <% Response.write "<table border=1>" Response.write "<tr>" Response.write "<td border=1>" For i=1 to 9 For j=1 to 9 A=j*i Response.write A Response.write "</td>" Response.write "<td>" Next Response.write "</tr>" Response.write "<tr>" Next Response.write "</table>" %> </body> あ 多分段をつけてるんですが半角スペースが無視されてしまうので読みづらいと思います、すみません。 これを実行すると、 2 3 4 5 6 7 8 9 1 2 3 4 5 6 7 8 9 4 6 8 10 12 14 16 18 6 9 12 15 18 21 24 27 ・ ・ ・ のようになって 最初の2 3 4 5 …は表に入ってくれません。 その後の横に並んでいる12345…からは表になりますがどうして こうなるのかさっぱりわかりません。 全部をひとつの表に入れたいのです。 もしかして根本的な考え方が間違っているのでしょうか？？ すみませんがお分かりの点がありましたら教えていただけませんでしょうか。 なんとなく、答えをそのまま書いてもらうのはずるいような気がするのでヒントだけでもかまいません。 よろしくお願いいたします。
- ベストアンサー
- Visual Basic
- Java Scriptで・・・
<form name="f"> <table border> <tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr> <script type="text/javascript"> <!-- // 変数・関数の定義 var i, n1, n2; var s = new Array(11); // 正解を保存する配列 s[0] ～ s[10] function myrandom(n) { return Math.floor(Math.random() * n); } function check() { var i, ok=0, ng=0; for (i=1; i<=10; i++) { if (document.f.elements["s" + i].value == s[i]) { document.f.elements["c" + i].value = "○"; ok++; } else { document.f.elements["c" + i].value = "×"; ng++; } } document.f.ok.value = ok; document.f.ng.value = ng; } for(i=1; i<=10; i++){ n1 = myrandom(10) + 1; n2 = myrandom(10) + 1; s[i] = n1 + n2; document.writeln('<tr>'); document.writeln('<td>' + i + '</td>'); document.writeln('<td>' + n1 + ' + ' + n2 + ' =</td>'); document.writeln('<td><input type="text" name="s' + i + '" size="3"></td>'); document.writeln('<td><input type="text" name="c' + i + '" size="3"></td>'); document.writeln('</tr>'); } // --> </script> </table> <input type="button" value="答え合わせ" onclick="check();"> 正答数：<input type="text" name="ok" size="3"> 誤答数：<input type="text" name="ng" size="3"> </form> このようなプログラムを作ったのですが、この表示される10問が全部異なる問題となるようにするにはどうすればいいでしょうか？
- ベストアンサー
- その他（プログラミング・開発）
- document.writeの問題？
document.writeでタグを書き入れる時に、よく、下記のように面倒な 書き方で行を変えていますが、一行でタグをすべて書いたのではなんか問題があるのでしょうか？ ------------------------------------- document.write("<table>") document.write("<tr>") document.write("<td>表の内容</td>") document.write("</tr>") document.write("</table>") ------------------------------------- この一行で終わりだと思うのですが・・・？ document.write("<table><tr><td>表の内容</td></tr></table>")
- 締切済み
- JavaScript
- javascripに関する質問です
前回質問したものと似たような質問ですけど９×９のマス目一つづつに中点・を表示させたいですfor文とif文を使って表示させたいのですがなかなかうまくいきませんどなたかご教授ください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>九九の表を作成する</title> </head> <body bgcolor="#ffffff"> <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>九九の表</h1>"); document.write("<table border>"); for (var i = 1; i < 10; i++){ document.write("<tr>"); // ひとつの行を作成 for(var j = 1; j < 10; j++) { document.write("<td>"); if ( i==1 || j==1 ) { document.write("<td>"); document.write("・"); document.write("<","/td>"); } document.write("<","/tr>"); } document.write("<","/table>"); document.write("<","/center>"); //--> </script> </body> </html>
- ベストアンサー
- JavaScript
- DOM？ tableの記述について
よろしくお願いします。 tbody内をループさせて表示させるスクリプトを作ってみました。 ここで質問なのですが、表示内容を横にできるのでしょうか？ イメージとしては・・ A01 A02 A03 B01 B02 B03 を以下のように A01 B01 A02 B02 A03 B03 no のようにしたいのです。 ただのHTMLなら <html> <head> <title>test</title> </head> <body> <table border=0> <tr> <td> <table border=0> <tr><td>A01</td></tr> <tr><td>A02</td></tr> <tr><td>A03</td></tr> </table> </td> <td> <table border=0> <tr><td>B01</td></tr> <tr><td>B02</td></tr> <tr><td>B03</td></tr> </table> </td> </tr> </table> </body> </html> みたいな感じでできると思うんですが、以下のソースだと どうしても表示されなくなります。どこをどうすると よろしいでしょうか？どうかよろしくお願いします。 ------------------------------------------------- <html> <head> <title>TABLE TEST</title> <script> function tsample() { var mybody=document.getElementsByTagName("body").item(0); mytable = document.createElement("TABLE"); mytr = document.createElement("TR"); mytablebody = document.createElement("TBODY"); for(j=0;j<4;j++) { mycurrent_row=document.createElement("TD"); mytablet =document.createElement("TABLE"); for(i=0;i<3;i++) { mycurrent_cell=document.createElement("TR"); mycurrent_cen=document.createElement("TD"); currenttext=document.createTextNode("NO "+j+" LNO "+i+" "); mycurrent_cen.appendChild(currenttext); mycurrent_cell.appendChild(mycurrent_cen); } mycurrent_row.appendChild(mytablet); mytablebody.appendChild(mycurrent_row); } mytable.appendChild(mytablebody); mybody.appendChild(mytr); mybody.appendChild(mytable); mytable.setAttribute("border","2"); } </script> </head> <body onload="tsample()"> </body> </html>
- ベストアンサー
- JavaScript
- テーブルの枠線
IEブラウザのバージョンにより、表示が変わることはわかっているのですが どうしても解決できないので質問させていただきます。 対応ブラウザがIE8からIE11という前提なので、まずはIE8で試してみました。 きれいに表示できました。 が、IE11で表示したら、見出しは枠線が表示されました。 でも、中の罫線が表示されません。（画像添付） IE9、IE10はソフトを入れ直しが必要なので、また未確認です。 <meta>タグを入れてもダメでした。（IE=edge） IE8を捨ててもよいので、IE11で枠線を表示させるにはどうしたらよいのか、 ご教授願えないでしょうか？ widthの指定もしているし、border-styleも記述しているつもりですが IE11では何が足りないのか、わかりません。 以下にソースコードを記載しますので よろしくお願いいたします。 ※まだdebug中なので、罫線以外につきましては無視願います。 <html> <head> <style type="text/css"> #midashi { border:2px solid #ffffff; border-collapse:collapse; } #table1 { border:2px solid #3d9f51; border-collapse:collapse; } #table0 { border:2px solid #83ca51; border-collapse:collapse; float:left; margin-right:-3px; } #table1 .td0{ width:15px; height:20px; border: none; text-align:left; font-size:80%; } #table1 .td1{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "dotted"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2{ width:12px; height:20px; border-top-width: 1px; border-top-color = "#3d9f51"; border-top-style = "solid"; border-right-width: 1px; border-right-color = "#aaa"; border-right-style = "solid"; background-color:#FFFFFF; border-collapse:collapse; } #table1 .td2bg{ background-color:#83ca51; } #table0 .td3{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#83ca51; border-collapse:collapse; text-align:center; font-size:80%; } #table0 .td3non{ width:60px; height:20px; border-bottom: 1px #7f7f7b solid; background-color:#ffffff; border-collapse:collapse; text-align:center; font-size:80%; } </style> </head> <body> <table id="table0"> <script type="text/javascript"> //**************************************************************************** //--- 番号 for(i=0; i<9; i++){ document.write('<tr>'); if( i == 0){ document.write('<td class="td3non"> </td>') }else{ document.write('<td class="td3">部屋' + i + '</td>') } document.write('</tr>'); } //--- //**************************************************************************** </script> </table> <table id="table1"> <script type="text/javascript"> //**************************************************************************** //--- 見出し document.write('<tr>'); for(j=0; j<48; j++){ // 30分単位の一日分 if( j%2 == 1){ document.write('<td class="td2 td2bg"></td>') // 時間表示無し }else{ document.write('<td class="td0 td2bg">' + (j/2) + '</td>') // 時間表示有り } } document.write('</tr>'); //--- //**************************************************************************** //**************************************************************************** //--- 時間テーブル for(i=0; i<8; i++){ // i:部屋の数 document.write('<tr>'); for(j=0; j<45; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2"></td>') // solid }else{ document.write('<td class="td1"></td>') // dotted } } for(j=0; j<3; j++){ // 30分単位の一日分(48) if( j%2 == 1){ document.write('<td class="td2" style="font-size:50%;text-align:center;">・</td>') // solid }else{ document.write('<td class="td1" style="font-size:50%;text-align:center;">・</td>') // dotted } } document.write('</tr>'); //--- //**************************************************************************** } </script> </table> </body> </html>
- ベストアンサー
- CSS
- スクリプトから出力されるHTMLについて
Webプログラミングでは、スクリプトから出力されるHTMLソースの見た目にも気を配るべきなんでしょうか？ 使おうとしている言語では、スクリプト側の作業効率や可読性を優先させると、出力されるHTML側に無駄な改行が入ってしまうので気になっています。 例えば↓こういうふうに改行が入ってしまう場合、 <table border="1"> <tr> <td>1</td> <td>動物</td> <td>猫</td> </tr> ↓HTML部分がこういう感じの書き方なら、それに合わせた出力にした方が良いのか？という意味です。 <table border="1"> <tr> <td>1</td> <td>動物</td> <td>猫</td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます。