- ベストアンサー
javascriptで表(テーブル)の自動作成
現在javascriptで簡単なシミュレーションツールの方を作成しています。 例として りんご100円を [10]個買いました。※[ ]はテキストボックスでユーザーが自由に入力できます。 ボタンをクリックするとりんごの合計の値段が計算されます。 買物金額は[1000]円です。※[ ]はテキストボックスでjavascriptによる計算結果が表示されます。 この処理結果を表に表示させる(自動作成)ということはそもそも可能でしょうか？(下のような感じで) ----------------------------------- 商品 金額 個数 合計金額 ----------------------------------- りんご 100 10 1000 ----------------------------------- 表を作るタイミングとしてはボタンをクリックした後、テキストボックスの値を使って処理を行う ということになりますが、表を作成する場合同じページで処理を行えるのか、それとも別の ウィンドウかページを開いて表を作成しなければならないのでしょうか？ 「document.write（引数）」で表示が可能なのでしょうか？この方法がピンとこなくて…。 HPを検索した所最初から値が解っていてそれを元に表を作成するというjavascriptの記述はありましたが、こういうことが出来るのかすらも解りません。 (出来そうな気がするのですが、見本になるようなページが記憶になかったので…) どなたかご助力を教えていただけると大変助かります。よろしくお願いします。
- hiyokohiyo
- お礼率100% (17/17)
- JavaScript
- 回答数5
- ありがとう数5
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (4)
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3>javascript内部ではcssのクラス呼び出しは出来無いのでしょうかね？ 呼び出しというか、class の設定は、javascript からできますよ。 className で設定します。(一部ブラウザで名前が違うかもしれません) #3の場合は、テーブルを全部作るのではなく、TBODY の中味以外は非表示になっているだけなので、script からでなく、CSS であらかじめstyleの設定はできます。 TABLE#result で修飾してやれば、id="result" のTABLE に含まれるエレメントのスタイルという制限ができます。
お礼
重ねてのご質問をありがとうございました。 javascriptの呼び出しはclassNameを使用するんですね。 classでならなくて？？？となっていたので勉強になりました。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>サンプル</title> <style><!-- TABLE#result { display:none; } TH { border-color: black; border-width: 1px; border-style: solid none solid none; } TBODY TR { text-align: right; } TBODY TD { border-color: black; border-width: 1px; border-bottom-style: solid; } .num { text-align: right; } --> </style> <script type="text/javascript"><!-- function calcAndDisp(f){ document.getElementById("result").style.display='block'; f.sum.value = f.price.value * f.x.value; var data = document.getElementById("data"); var newTR; var newTD; newTR = data.insertRow(data.rows.length); newTD = newTR.insertCell(0); newTD.innerHTML = "りんご"; newTD = newTR.insertCell(1); newTD.innerHTML = f.price.value; newTD = newTR.insertCell(2); newTD.innerHTML = f.x.value; newTD = newTR.insertCell(3); newTD.innerHTML = f.sum.value; } //--> </script> </head> <body> <form> りんご<br> 単価：<input class="num" name="price" type="text" value="100" readonly>円<br> 個数：<input class="num" name="x" type="text" value="0">個<br> 金額：<input class="num" name="sum" type="text" value="0">円<br> <button type="button" onclick="calcAndDisp(this.form)">計算＆結果表示</button> </form> <hr> <TABLE id="result" cellspacing="0"> <THEAD><TR><TH>商品</TH><TH>金額</TH><TH>個数</TH><TH>合計金額</TH></TR></THEAD> <TBODY id="data"></TBODY> </TABLE> </body> </html>
お礼
質問のご解答の方ありがとうございます。 実はカキコミを見たときに既にプロトタイプを作った状態で…こちらも機会がありましたら是非とも使わせていただきたいと思います。 動作も確認させていただきましたが、ソースがシンプルで解りやすいですね。 idでの呼び出しというのが自分は知らなかった知識だったので勉強になりました。 BLUEPIXY様も表の作成をスタイルシートでお使いのようですが、javascript内部ではcssのクラス呼び出しは 出来無いのでしょうかね？
こんなのはどうでしょうか。 かなり前にテストしたものです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>IE6専用”カートに入れる”テストサンプル</title> <script type="text/javascript"> <!-- B = new Array(); B[0] = new Array("りんご","みかん","梨","柿","スイカ"); B[1] = new Array("980","999","100","2980","1980"); function select(){ var SEL = document.getElementsByTagName('select')[0]; for(k = 0;k < B[0].length;k++){ var OPT = document.createElement('option'); var OPTTEXT = document.createTextNode(B[0][k]); SEL.appendChild(OPT); OPT.setAttribute('value',B[0][k]); OPT.appendChild(OPTTEXT); } var No=document.getElementsByTagName('select')[0].selectedIndex; document.getElementsByTagName('span')[0].firstChild.nodeValue=B[1][No]; } function bb(){ var No=document.getElementsByTagName('select')[0].selectedIndex; document.getElementsByTagName('span')[0].firstChild.nodeValue=B[1][No]; } //****本題はここです**** function tr(){ InputData = new Array(); InputData[0]=document.getElementsByTagName('select')[0].value; InputData[1]=document.getElementsByTagName('span')[0].firstChild.nodeValue; InputData[2]=document.getElementsByTagName('input')[0].value; InputData[3]=InputData[1]*InputData[2]; var TBODY = document.getElementsByTagName('tbody')[0]; var TR = document.createElement('tr'); TBODY.appendChild(TR); for(k = 0;k < InputData.length;k++){ var TD = document.createElement ('td'); var TDTEXT = document.createTextNode(InputData[k]); TR.appendChild(TD); TD.appendChild(TDTEXT); } } //--> </script> </head> <body onload="select()"> <table border="1"> <thead> <tr><th>商品</th><th>単価</th><th>個数</th><th>金額</th></tr> </thead> <!-- <tfoot> <tr><td>合計</td><td>単価計</td><td>個数計</td><td>総金額</td></tr> </tfoot> ここにtfootを入れて縦の値の合計を入れることも可能 --> <tbody></tbody> </table> <select style="width:5em" onchange="bb()"></select> <span>***</span>円 <input type="text" style="width:5em" value="1">個 <button onclick="tr()">カートに入れる</button> </body> </html> テストしただけで実際に使ったことはありません。
お礼
こちらの質問に素早く答えていただきありがとうございます。 動作を確認しましたが、これ凄く格好良いですね！ javascriptではこういうことも出来てしまうんですね。 今回は変数等の関係で下の方の文法を使わせていただきますが、似たようなものが必要になった場合是非ともこちらを使わせていただきたいと思います。 使う機会がないなんて勿体無いです。
- arenani_sorenani
- ベストアンサー率73% (58/79)
document.writeでもできますが、使いませんでした・・ <style type="text/css"> table { margin:0px; padding:2px; color:black; font:9pt 'ＭＳ Ｐゴシック',sans-serif; border-collapse:collapse; } td { width:80px; padding:3px; text-align:center; border:1px black solid; } </style> <script type="text/javascript"> function calc(){ obj=document.forms[0].kosu; val=obj.value; if(val!=""&&!isNaN(val)){ var str=""; str+="<table><tr><td>商品</td><td>単価</td><td>個数</td><td>金額</td></tr>" str+="<tr><td>りんご</td><td>100</td><td>"+val+"</td><td>"+(val*100)+"</td></tr></table>" document.getElementById("result").innerHTML=str; }else{ alert("数字を入力してください！！"); obj.value=""; document.getElementById("result").innerHTML=""; obj.focus; } } </script> </head> <body> <form> りんご100円を <input type="" name="kosu" style="width:50px;ime-mode:disabled;text-align:center;" /> 個買いました。 <input type="button" value="計算" onclick="calc()" /> <div id="result"> </div> </form> </body> .
お礼
私が今作っているプログラムに埋め込みやすい方法だったので是非使わせていただくことになりました！ありがとうございます。 おかげさまで無事に表の表示が出来るようになりました！ ただ、ちょっと疑問に思ったのですが、CSSのテーブルの設定はこの表だけにかけたいと思った場合クラス化は出来無いのでしょうか？(他にテーブルをいっぱい使ったページに埋め込むので) テーブルを作ってるのはjavascriptなので(.jsファイル)そこに<LINK REL=stylesheet href="propa.css">の構文を入れるのは変だよな…と思いましたので。 ちょっと自分でもやってみたのですが、出来無い感じがしたので…。 もし、何方かこちらを見ている方が解る方がいらっしゃったら重ねての質問になって申し訳ないのですがご教授いただけると幸いです。
お礼
すいません…我侭申し上げて…。(汗) おかげさまで自分の要望通りの操作が出来るようになりました。 大変ご足労をおかけいたしました。これで無事に休日を過ごすことができます。 本当にありがとうございました。