- ベストアンサー
promptで入力されたデータをテーブルに表示する方法。
Promptで入力した情報（生徒名とテストの点数）をテーブルに表示したいのですが、どうやるのかわかりません。 Promptはページを開いたときに自動的にでてきて、 空白入力があるまで何度でもポップアップするというふうになっています。 Ｓｔｙｌｅ Ｓｈｅｅｔを使ってやろうとしているのですが、今一やり方がわかりません。 ぜひぜひ、おしえてください！！！ <HTML> <head> <SCRIPT LANGUAGE=JavaScript> //Question 1 function oldDisplay() { var name = new Array(); var grade = new Array(); var entry = "new"; var Test = new Array(); var index = 0; var total = 0; while(true) { name[index]=prompt("Enter student name", ""); if (name[index]=="") {break} grade[index++] = parseInt(prompt("Enter grade for that student",0)); } document.write ("<PRE>"); for(index=0; index < name.length -1; index++) { document.write("Name: "+name[index]+ "\t\t\t Score: "+grade[index]+ "\n") } total = name.length - 1 document.write("This report lists "+ total + " records.") //Question 2 var ave = 0; for (index=0;index<grade.length;index++) { ave = ave+grade[index]; } ave=ave/(index); document.write("\n\n\nThe average score is "+ave); document.write ("</PRE>"); </SCRIPT> </head> <BODY onload="oldDisplay()"> <DIV ID="myDIV"> <P ID="myPARA"><H1>The results of the entry and computation are shown below.</H1></P> </DIV> </BODY> </HTML>
- RJ519
- お礼率81% (9/11)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
DOMを利用したDHTMLになりますが、以下のようなソースにしてみてはいかがでしょうか。 <HTML> <head> <SCRIPT LANGUAGE=JavaScript> <!-- //Question 1 function oldDisplay() { if (document.getElementById){ var name = new Array(); var grade = new Array(); var entry = "new"; var Test = new Array(); var index = 0; var total = 0; while(true) { name[index]=prompt("Enter student name", ""); if (name[index]=="") {break} grade[index++] = parseInt(prompt("Enter grade for that student",0)); } ndatum=document.getElementById("datum"); for(index=0; index < name.length -1; index++) { ntr=document.createElement("tr"); ntd1=document.createElement("td"); ntd2=document.createElement("td"); ntd1.innerHTML="Name: "+name[index]; ntd2.innerHTML="Score: "+grade[index]; ntr.appendChild(ntd1); ntr.appendChild(ntd2); ndatum.appendChild(ntr); } total = name.length - 1 document.getElementById("numi").innerHTML="This report lists "+ total + " records."; //Question 2 var ave = 0; for (index=0;index<grade.length;index++) {ave = ave+grade[index];} ave=ave/(index); document.getElementById("ave").innerHTML="The average score is "+ave+"<br>"; } } //--> </SCRIPT> </head> <BODY onload="oldDisplay()"> <DIV ID="myDIV"> <H1>The results of the entry and computation are shown below.</H1> <table> <tfoot> <tr> <td colspan="2" id="numi"></td> </tr> <tr> <td colspan="2" id="ave"></td> </tr> </tfoot> <tbody id="datum"></tbody> </table> </DIV> </BODY> </HTML> document.write()は、それでテキストを書き出そうとすると、documentストリームを開き直して、それまでに読み込まれていたソースをすべて破棄してしまいます。 そのために、見出しの文字列が破棄されていたのでしょう。 試しに、以前のソースで処理を実行した後に、ブラウザでソースを表示させてみてください。 document.write()で書き出した内容しか残っていないのではないかと思います。 上記では、DOMを利用して、入力されたデータをテーブルにまとめて表示させるようにしてあります。 項目数が多い場合でも、DOMのほうから新しくtr要素やtd要素を必要に応じて作成し、追加していくので、整然としたテーブルとして表示できると思います。 Windows Me上の、IE6とNetscape7.1で動作確認してあります。 ちなみに上記ソースでは排除してしまったので、蛇足ですが、元のソースの <P ID="myPARA"><H1>The results of the entry and computation are shown below.</H1></P> この部分は、HTML的にはあまりよいソースとはいえないと思います。 <p>要素の中には、ブロックレベル要素を入れるのはいけませんので、 <H1>The results of the entry and computation are shown below.</H1> <P ID="myPARA"></P> という形にする方が良いでしょう。 参考になれば。
その他の回答 (4)
- nuruhho44
- ベストアンサー率57% (38/66)
lead1976様、いつも私のへっぽこな回答をフォローして下さり、まことにありがとうございます。ちょうど、ＤＯＭでセルを追加する方法を研究中でして、参考にさせていただきます。 ところで、こんな風にしたら使い易いかなと思って、研究がてら以下のスクリプトを作ってみました。お試し下さい。 <HTML> <head> <SCRIPT LANGUAGE=JavaScript> <!-- var name = new Array(); var grade = new Array(); var index = 0; function oldDisplay() { name[index] = document.myForm.Name.value; txt = document.myForm.Score.value; data = txt.match(/[^0-9]/g); if (data || txt =="") { alert("数値を入力してください"); document.myForm.Score.value = ""; return; } grade[index] = eval(txt); SS = document.getElementById("TD1").innerHTML; SS = SS + ("Name: " + name[index] + " Score: " + grade[index] + "<BR>"); document.getElementById("TD1").innerHTML=SS; document.myForm.Name.value = ""; document.myForm.Score.value = ""; index++; document.getElementById("TD2").innerHTML="This report lists "+ index + " records."; ave = 0; for (i=0; i<index; i++) { ave += grade[i]; } ave = (Math.round(ave * 100 / index)) / 100; document.getElementById("TD3").innerHTML="The average score is "+ ave; } //--> </SCRIPT> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- DIV{ font-size : 16px; font-family : "ＭＳ 明朝";} TD{ font-size : 16px; font-family : "ＭＳ 明朝";} --> </STYLE> </head> <BODY> <H1>The results of the entry and computation are shown below.</H1> <DIV> <FORM name="myForm"> Name:<INPUT type="text" size="20" name="Name"><BR> Score:<INPUT type="text" size="4" name="Score"><BR> <INPUT type="button" value=" OK " onClick="oldDisplay()"> <INPUT type="reset" value="reset"></FORM> </DIV> <TABLE border="1"> <TBODY> <TR> <TD id="TD1"></TD> </TR> <TR> <TD id="TD2">This report lists 0 records.</TD> </TR> <TR> <TD id="TD3">The average score is 0</TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
お礼
へ～～！こんなふうにもできるんですね！ 一つ一つデータを入力するたびに表示されて とてもわかりやすいです。 知識があるといろいろ工夫できるものなんですね。 おかげさまですべての問題を解決することができました！ でも未だJavascriptは私にとっては謎だらけです。 またこれからも、この場に質問させてもらうと思いますが、よろしくおねがいします！ ありがとうございました！
- nuruhho44
- ベストアンサー率57% (38/66)
すみません。document.writeってどうも苦手で、なんで消えるのかわからないんです。ただ今調査しております。 とりあえず document.write ("<DIV ID='myDIV'>"); document.write ("<P ID='myPARA'>"); document.write ("<H1>The results of the entry and computation are shown below.</H1></P>"); document.write ("</DIV>") ; この文を結果表示の前に挿入するというのはいかがでしょうか？せこいアイデアですみません（汗*2）
お礼
アドバイスをありがとうございます！！ すばやいアドバイスをもらえて、本当に助かります。 おかげでJavascriptの勉強がだんだん楽しくなってきました。
- nuruhho44
- ベストアンサー率57% (38/66)
すみません！思いっきり外してました。ループはこのままで良かったんですね。またもう１つ勉強になりました。申し訳ございませんでした（汗） テーブルとして表示なさるのでしたら document.write ("<TABLE border='1'>"); for(index=0; index < name.length -1; index++) { document.write("<TR><TD>Name: "+name[index]+ "</TD><TD> Score: "+grade[index]+ "</TD></TR>") } total = name.length - 1 document.write("<TR><TD colspan='2'>This report lists "+ total + " records.</TD></TR>") //Question 2 var ave = 0; for (index=0;index<grade.length;index++) { ave = ave+grade[index]; } ave=ave/(index); document.write("<TR><TD colspan='2'>The average score is "+ave+ "</TD></TR>"); document.write ("</TABLE>"); } という風にテーブル関連のタグも一緒にdocument.write文に書くだけで良いかと思います。
お礼
ありがとうございます！！！ 今、教えていただいたとおりに書いてみたら ちゃんとテーブルに表示されました。 こうやってＴＡＢＬＥに表示するんですね。 私のほうこそ本当に勉強になりました。 しかし、なぜＢＯＤＹに書いたものがきえてしまうんでしょう？ 本当に不思議です。 でも難問が解決できてうれしいです。 ありがとうございます！！
- nuruhho44
- ベストアンサー率57% (38/66)
はじめまして。 入力部分のループを以下のようにすれば動作しました。 do { name[index]=prompt("Enter student name", ""); if (name[index]=="") break; grade[index++] = parseInt(prompt("Enter grade for that student",0)); } while (true) do～while（条件）にすれば最低１回はループを通過するとのことです。 私はループは何でもfor文でやってしまうので、とても勉強になりました。 あと、質問文をコピペしたのですが、 <BODY onload="oldDisplay()"> の部分で、BODYの後のスペースが全角であったためエラーが出ました。質問文を入力する際のミスであろうと思われますが、一応そちらの本文をご確認ください。
補足
ありがとうございます！！ コード自体は動くようなんですが、 このＨＴＭＬページを開いたときにはちゃんと 表示される ＜The results of the entry and computation are shouwn below> というものがprompts情報が表示されるときには 消えてしまいます。 ループのあとにdocument.writeをつかって できるのかと思ったのですができません。 どうすればいいんでしょう？
お礼
すごい！！！ ちゃんと思い通りにできてる！ おどろきました。 そうか、だから文字がきえてしまっていたんですね。 とてもわかりやすい説明ありがとうございます。 ほんと、うれしいです。 ありがとうございました！ またおねがいします！