現在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>
.
すいません…我侭申し上げて…。(汗)
おかげさまで自分の要望通りの操作が出来るようになりました。
大変ご足労をおかけいたしました。これで無事に休日を過ごすことができます。
本当にありがとうございました。
No.4
- 回答日時:
#3>javascript内部ではcssのクラス呼び出しは出来無いのでしょうかね?
呼び出しというか、class の設定は、javascript からできますよ。
className で設定します。(一部ブラウザで名前が違うかもしれません)
#3の場合は、テーブルを全部作るのではなく、TBODY の中味以外は非表示になっているだけなので、script からでなく、CSS であらかじめstyleの設定はできます。
TABLE#result で修飾してやれば、id="result" のTABLE に含まれるエレメントのスタイルという制限ができます。
重ねてのご質問をありがとうございました。
javascriptの呼び出しはclassNameを使用するんですね。
classでならなくて???となっていたので勉強になりました。
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>
質問のご解答の方ありがとうございます。
実はカキコミを見たときに既にプロトタイプを作った状態で…こちらも機会がありましたら是非とも使わせていただきたいと思います。
動作も確認させていただきましたが、ソースがシンプルで解りやすいですね。
idでの呼び出しというのが自分は知らなかった知識だったので勉強になりました。
BLUEPIXY様も表の作成をスタイルシートでお使いのようですが、javascript内部ではcssのクラス呼び出しは
出来無いのでしょうかね?
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>
テストしただけで実際に使ったことはありません。
こちらの質問に素早く答えていただきありがとうございます。
動作を確認しましたが、これ凄く格好良いですね!
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>
.
私が今作っているプログラムに埋め込みやすい方法だったので是非使わせていただくことになりました!ありがとうございます。
おかげさまで無事に表の表示が出来るようになりました!
ただ、ちょっと疑問に思ったのですが、CSSのテーブルの設定はこの表だけにかけたいと思った場合クラス化は出来無いのでしょうか?(他にテーブルをいっぱい使ったページに埋め込むので)
テーブルを作ってるのはjavascriptなので(.jsファイル)そこに<LINK REL=stylesheet href="propa.css">の構文を入れるのは変だよな…と思いましたので。
ちょっと自分でもやってみたのですが、出来無い感じがしたので…。
もし、何方かこちらを見ている方が解る方がいらっしゃったら重ねての質問になって申し訳ないのですがご教授いただけると幸いです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- Visual Basic(VBA) visual basic初心者です。 visual studioで電卓を作成しています。 実行時にテ 1 2023/02/08 00:18
- Access(アクセス) AccessVBAで降順にするテーブル作成クエリを使用して作成したテーブルを削除し同一のテーブル作成 1 2023/01/06 11:17
- その他(データベース) Accessフォームからパラメーターで表示したレコードを指定のExcelのセルへ転送する方法について 2 2022/08/22 18:04
- C言語・C++・C# このプログラミングの問題を教えてほしいです。 キーボードからデータ数nとn個のデータを入力し、平均値 3 2022/12/19 22:51
- Java java 飾子を付けること(public static・・・) ・コンソールへの出力処理はmainメ 2 2022/06/16 19:34
- Excel(エクセル) IF 関数で「〇〇 という文字を含む場合」の分岐処理で表示された数字はSUMで数字集計できますか? 3 2022/08/02 16:29
- Java javaの質問です 次の機能を有するメソッド4つを自クラスに作成し、実装したいです 【機能】 足し算 1 2022/06/15 17:49
- Excel(エクセル) エクセルでSUMIFS関数で条件範囲の部分が#valueになる。 4 2023/04/28 12:42
- Excel(エクセル) 文字列を数式として変換する事はできますか? 6 2022/06/23 10:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
テーブル内のチェックボックス...
-
localStorageでのcheckbox制御
-
ラジオボタンが選択されたらテ...
-
同一nameの input type="text"...
-
jQuery テキストボックス読み取...
-
JavaScriptによる自動計算フォーム
-
JavaScriptの「.querySelectorA...
-
入力チェックの外部スクリプト...
-
Javascriptで自動計算の合計の...
-
ラジオボタン選択でtextfieldを...
-
画面の2重起動をチェックする...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
テキストボックス入力を半角英...
-
【jQuery】input nameの文字列...
-
二つの入力欄に、同時に同じ文...
-
onchangeイベントを強制的に発...
-
<input>の選択肢をプルダウンメ...
-
ボタンかリンクをクリックする...
-
%の計算の仕方
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
画面表示とともにtableの指定の...
-
JavaScriptの「.querySelectorA...
-
Javascriptの電卓で最初の何も...
-
localStorageでのcheckbox制御
-
文字数を数える際に空白、改行...
-
テーブル内のチェックボックス...
-
クリックしたラジオボタンの行...
-
複数のselect値で1つも選択され...
-
jQueryで合計を出したい
-
送信ボタン連打を抑止したいです
-
ラジオボタンが選択されたらテ...
-
ラジオボタンを一括で操作する...
-
formで項目を連結したい
-
javascriptで表(テーブル)の自...
-
同一nameの input type="text"...
-
動的に生成されるラジオボタン...
-
ボタンクリックでフォーカス移動
-
JavaScriptによる自動計算フォーム
-
選択したテーブルのセルの背景...
おすすめ情報