• ベストアンサー

javascriptで表(テーブル)の自動作成

現在javascriptで簡単なシミュレーションツールの方を作成しています。 例として りんご100円を [10]個買いました。※[ ]はテキストボックスでユーザーが自由に入力できます。 ボタンをクリックするとりんごの合計の値段が計算されます。 買物金額は[1000]円です。※[ ]はテキストボックスでjavascriptによる計算結果が表示されます。 この処理結果を表に表示させる(自動作成)ということはそもそも可能でしょうか?(下のような感じで) -----------------------------------   商品  金額  個数  合計金額 -----------------------------------  りんご   100     10    1000 ----------------------------------- 表を作るタイミングとしてはボタンをクリックした後、テキストボックスの値を使って処理を行う ということになりますが、表を作成する場合同じページで処理を行えるのか、それとも別の ウィンドウかページを開いて表を作成しなければならないのでしょうか? 「document.write(引数)」で表示が可能なのでしょうか?この方法がピンとこなくて…。 HPを検索した所最初から値が解っていてそれを元に表を作成するというjavascriptの記述はありましたが、こういうことが出来るのかすらも解りません。 (出来そうな気がするのですが、見本になるようなページが記憶になかったので…) どなたかご助力を教えていただけると大変助かります。よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.5

ご要望の通り テーブルのCSSを限定的にしました・・・・ あとエラー処理の部分最後でフォーカスを入力欄に 戻すつもりが、記述が間違っているため戻らないので 修正しました。 ×obj.focus; →○obj.focus(); あとinputタグのtypeが書き忘れてましたので直しました。 <style type="text/css"> #tbl01 { margin:0px; padding:2px; color:black; font:9pt 'MS Pゴシック',sans-serif; border-collapse:collapse; } #tbl01 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 id='tbl01'><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="text" name="kosu" style="width:50px;ime-mode:disabled;text-align:center;" /> 個買いました。 <input type="button" value="計算" onclick="calc()" /> <div id="result"> </div> </form> </body> .

hiyokohiyo
質問者

お礼

すいません…我侭申し上げて…。(汗) おかげさまで自分の要望通りの操作が出来るようになりました。 大変ご足労をおかけいたしました。これで無事に休日を過ごすことができます。 本当にありがとうございました。

その他の回答 (4)

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

#3>javascript内部ではcssのクラス呼び出しは出来無いのでしょうかね? 呼び出しというか、class の設定は、javascript からできますよ。 className で設定します。(一部ブラウザで名前が違うかもしれません) #3の場合は、テーブルを全部作るのではなく、TBODY の中味以外は非表示になっているだけなので、script からでなく、CSS であらかじめstyleの設定はできます。 TABLE#result で修飾してやれば、id="result" のTABLE に含まれるエレメントのスタイルという制限ができます。

hiyokohiyo
質問者

お礼

重ねてのご質問をありがとうございました。 javascriptの呼び出しはclassNameを使用するんですね。 classでならなくて???となっていたので勉強になりました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

<!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>

hiyokohiyo
質問者

お礼

質問のご解答の方ありがとうございます。 実はカキコミを見たときに既にプロトタイプを作った状態で…こちらも機会がありましたら是非とも使わせていただきたいと思います。 動作も確認させていただきましたが、ソースがシンプルで解りやすいですね。 idでの呼び出しというのが自分は知らなかった知識だったので勉強になりました。 BLUEPIXY様も表の作成をスタイルシートでお使いのようですが、javascript内部ではcssのクラス呼び出しは 出来無いのでしょうかね?

noname#20964
noname#20964
回答No.2

こんなのはどうでしょうか。 かなり前にテストしたものです。 <!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> テストしただけで実際に使ったことはありません。

hiyokohiyo
質問者

お礼

こちらの質問に素早く答えていただきありがとうございます。 動作を確認しましたが、これ凄く格好良いですね! javascriptではこういうことも出来てしまうんですね。 今回は変数等の関係で下の方の文法を使わせていただきますが、似たようなものが必要になった場合是非ともこちらを使わせていただきたいと思います。 使う機会がないなんて勿体無いです。

回答No.1

document.writeでもできますが、使いませんでした・・ <style type="text/css"> table { margin:0px; padding:2px; color:black; font:9pt 'MS Pゴシック',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> .

hiyokohiyo
質問者

お礼

私が今作っているプログラムに埋め込みやすい方法だったので是非使わせていただくことになりました!ありがとうございます。 おかげさまで無事に表の表示が出来るようになりました! ただ、ちょっと疑問に思ったのですが、CSSのテーブルの設定はこの表だけにかけたいと思った場合クラス化は出来無いのでしょうか?(他にテーブルをいっぱい使ったページに埋め込むので) テーブルを作ってるのはjavascriptなので(.jsファイル)そこに<LINK REL=stylesheet href="propa.css">の構文を入れるのは変だよな…と思いましたので。 ちょっと自分でもやってみたのですが、出来無い感じがしたので…。 もし、何方かこちらを見ている方が解る方がいらっしゃったら重ねての質問になって申し訳ないのですがご教授いただけると幸いです。

関連するQ&A

  • JavaScriptについて教えてください。

    JavaScriptについて教えてください。 ringo.html、orange.htmlがあります。 それぞれに、テキストボックスと、submitボタンが一つずつあります。 行いたいことですが、 どちらかの、submitボタンをクリックすると、 それぞれの、テキストボックスの値を表示したいです。 ※hiddenを使用して実現したいです。 【イメージ】 ringo.htmlのテキストボックスに「100」を入力 orange.htmlのテキストボックスに「200」を入力 いずれかの、submitボタンをクリックすると _______________ ringoの入力値は、100です。 orangeの入力値は、200です。 ________________ といったイメージです。 よろしくお願いします。

  • javascriptのわかる方へ

    ASP初心者です。 現在、ASPで開発をしています。 script言語はjavascriptを使っています。 ASPだけでなく、javascriptも初心者なので、本を読んでもさっぱりわかりません。 そこで質問いたします。 テキストボックスに値を入力させ、ボタンがクリックされたら、次のページで入力内容を表示させたいのですが、 1.次のページを表示させるにはどのように記述するのでしょうか? 2.入力された値を次のページで参照するにはどのように記述すればよいのでしょ うか? よろしくおねがいします。m(_ _)m

  • 【JavaScript】プルダウンで数字を選択後、即時計算したいですが

    【JavaScript】プルダウンで数字を選択後、即時計算したいですが 方法がわかりません。 http://bunjin.com/java/calc.html 以上のサンプルページでは、チェックボックスを押した直後、 下部のテキストボックスに金額が表示されるように設定されていますが、 チェックボックスの横などにプルダウンで数字を表示させて、 その数字の積を合計金額に表示させたいのです。 例) 「ラーメン(500円)」のチェックボックスにチェック(合計金額には「500 円」と表示) ↓ その「ラーメン(500円)」の横にプルダウンボックスを選択(値は1,2,3,・・・) ↓ 選択した値により、合計金額を変化させたい(プルダウンで1を選べば500円、2を選べば1000円、・・・) どうかよろしくお願いします。

  • Access VBA

    Access 2000 についての質問です。 下記のようなフォーム上のコンボボックスで 商品、産地、サイズを選択 →テキストボックスに個数を入力 →見積りボタンをクリック →テキストボックスに合計金額を表示 ----------------------------------------- フォーム  コンボ コンボ コンボ   テキスト  商品  産地  サイズ   個数 ボタン        テキスト 見積り        金額:______円 ----------------------------------------- というものを、下記の表に基づいて作りたいのです。 単価.xls ===================== 商品  産地 サイズ 単価 みかん 和歌山 L  30 リンゴ 青森  M  50 リンゴ 青森  L  70 リンゴ 長野  L  70 ===================== そこで、コンボボックスで選択した値を活かして 単価.xlsの ”単価”の値を利用して テキストボックスに表示したいのですが、 どのように記述すれば使用できるのか?わかりません。 超初心者ですのでわかりやすく教えてください。よろしくお願いします。

  • JavaScriptでこんなことできませんか?

    キーワードを入れるテキストボックスがひとつあって、キーワードを入力してボタンをクリックすると、同一ページ内の複数の別フォームのテキストボックスにその値が代入されるということはできるでしょうか?言わんとすることわかっていただけるでしょうか?

  • 多分簡単なJavaScriptなんだと思います。

    JavaScript初心者です。 チェックボックスが5つ有り、任意のチェックボックスをチェックして実行ボタンを押すと、sentakuという名前のテキストボックスにチェックしたボックスの値が代入されるjavascriptの記述を教えて下さい。 例えば、1番目と3番目と5番目に、チェックを入れて実行すると、テキストボックスsentakuには「1,3,5」と表示されるとベターです。

  • javascriptでの独自スクロールボタン作成

    IEで通常のスクロールバーは非表示にし、javascriptでjQueryを使用せずに、 上下ボタンおよびスクロールバーを作成することは可能でしょうか? また可能な場合、どのような方法で作成できるかご教授いただきたく思います。 この作成にあたってはhtmlの親子関係やテキストボックスを使用しない場合の ボタン作成を想定しています。

  • javascript歴 2ヶ月

    プログラミング初心者です。 javascriptファイルとhtmlファイルを分けて 記述しているのですが、 性別が男か女かというラジオボタンと「実行」 というボタンとひとつのテキストボックスを 作成し、どちらかをクリックし実行ボタンをクリック すると選択されたラジオボタンのvalueプロパティがテキス トボックスに表示されるというプログラムを作っています。 しかし! 初期表示を女にしたいので、 <input type="radio" checked name="rdo1" value="女" onClick="rdo_Change(this)">女 としたのですが、これで動かしてもうまくいかず、 テキストボックスにはundefinedと表示されます。 ぜひ、正しい書き方を教えていただけないでしょうか。 あと、チェックボックスにチェックがひとつもない場合 アラートで"ひとつ以上選択してください"という記述例 もお願いします。 どうかお願いいたします(泣)

  • テキストボックスを空白にする方法

    テキストボックスに数字が入力されている場合はいいんですが、何も入力されていないときに、其のテキストボックスの値をゼロとすると、どうしてもテキストボックスに0と入力しなければ其のテキストを計算式に使えないので困っています。テキストボックスに何も表示されていないままにしたいのですが。(値はセロということのまま)   例えばテキストボックス1には10、テクストボックス2には何も入力しないでそのままにする。ボタンをクリックすると、二つの値が足されて合計10とでるようにしたいのです。その際テキストボックス2には何も入力されないままでお願いします。 わかりにくい説明ですみませんがよろしくお願いします。

  • 1つのファイルにデザイン(HTML)と計算処理(PHP)を記述していますが、分けたいと思っています。

    PHP初心者です。 1つのファイルにデザイン(HTML)と計算処理(PHP)を記述していますが、分けたいと思っています。 何か方法がありますでしょうか?よろしくお願いします。 (画面仕様) HTMLファイルにFRAME1とFRAME2という名前の2つのインラインフレームを配置しています。 FRAME1はHTMLファイル、FRAME2はPHPファイルを使用します。 FRAME1にはテキストボックス、FRAME2はボタンが表示されます。 (動作手順) 以下のような動作をします。 (1)FRAME1のテキストボックスの内容を変更、又はFRAME2のボタンを押す。 OnChange()又はOnClick()イベント時にJavaScript処理が実行される。 <JavaScript処理> FRAME2のURLを更新(テキストボックス内容をURLの引数にする) (2)FRAME2は更新されたのでボタンが再表示される。 PHPとJavaSctiptが記述されているので実行される。 <PHP処理> URL引数で渡された値を判定、計算 <JavaScript処理> FRAME1のテキストボックスにPHPで計算した値を表示 FRAME2に使っているファイルにHTMLとPHPとJavaScriptが一緒にかかれています。これを何とかしたいです。

    • ベストアンサー
    • PHP

専門家に質問してみよう