アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：hiyokohiyo
  • 質問日時：
  • 回答数：5件

現在javascriptで簡単なシミュレーションツールの方を作成しています。
例として
りんご100円を [10]個買いました。※[　]はテキストボックスでユーザーが自由に入力できます。
ボタンをクリックするとりんごの合計の値段が計算されます。
買物金額は[1000]円です。※[　]はテキストボックスでjavascriptによる計算結果が表示されます。

この処理結果を表に表示させる(自動作成)ということはそもそも可能でしょうか？(下のような感じで)
-----------------------------------
　　商品　　金額　　個数　　合計金額
-----------------------------------
　りんご 　　100 　 　 10　　　 1000
-----------------------------------
表を作るタイミングとしてはボタンをクリックした後、テキストボックスの値を使って処理を行う
ということになりますが、表を作成する場合同じページで処理を行えるのか、それとも別の
ウィンドウかページを開いて表を作成しなければならないのでしょうか？
「document.write（引数）」で表示が可能なのでしょうか？この方法がピンとこなくて…。

HPを検索した所最初から値が解っていてそれを元に表を作成するというjavascriptの記述はありましたが、こういうことが出来るのかすらも解りません。
(出来そうな気がするのですが、見本になるようなページが記憶になかったので…)
どなたかご助力を教えていただけると大変助かります。よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

ご要望の通り


テーブルのCSSを限定的にしました・・・・

あとエラー処理の部分最後でフォーカスを入力欄に
戻すつもりが、記述が間違っているため戻らないので
修正しました。
×obj.focus;　→○obj.focus();

あとinputタグのtypeが書き忘れてましたので直しました。


<style type="text/css">
#tbl01 {
margin:0px;
padding:2px;
color:black;
font:9pt 'ＭＳ Ｐゴシック',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>





.
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/07/17 16:41

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

#3>javascript内部ではcssのクラス呼び出しは出来無いのでしょうかね？


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

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

通報する
お礼日時：2006/07/17 16:42

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

<!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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/07/16 18:39

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>
テストしただけで実際に使ったことはありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/07/16 18:36

No.1

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>




.
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

もし、何方かこちらを見ている方が解る方がいらっしゃったら重ねての質問になって申し訳ないのですがご教授いただけると幸いです。

通報する
お礼日時：2006/07/16 18:35

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報