• ベストアンサー

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

arenani_sorenaniの回答

回答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