いつもお世話になっています。タイトルの通り、innnerHTMLを使って自動生成された表を指定されたDIVに表示させたいと考えています。自分が形にしたい動作は 1.ラジオボタンを選択し、ボタンを押す 2.priceCalc関数内でラジオボタンのvalue値を取得 3.選択したボタンによって、料金の再計算を行うといった流れです。現在はラジオボタンに応じたvalue値の取得はできている状態ですが、表にvalue値が反映していないため、それぞれ単独で動いてしまっています。再計算ボタンを押したときにボタンと表が連動し、 value値ではなく、表そのものをpriceTableOutputに出力させる作りにするためにはどのように手直ししたら良いでしょうか？皆さんの知恵をお借りしたいです。よろしくお願いします。 innnerHTMLで自動生成された表を出力したい //ラジオボタンのvalue値を取得 var daysRate = 1; var nouki = document.getElementsByName("nouki"); function priceCalc(){ for(i=0; i 再計算ボタンを押すと価格表が再計算されます。通常配達翌日配達当日配達 innerHTMLで、ここに表を出力 var price = new Array(100,300,500); var table_start = " "; var table_end = " " document.write(table_start); for(var i=0; i " + parseInt(price[i]) * parseFloat(daysRate) + " "); } document.write(table_end);

innerHTMLで自動生成された表を出力させたい

解決済

質問者：chocotarosu
質問日時：2013/05/16 18:06
回答数：1件

いつもお世話になっています。
タイトルの通り、innnerHTMLを使って自動生成された表を
指定されたDIVに表示させたいと考えています。

自分が形にしたい動作は
1.ラジオボタンを選択し、ボタンを押す
2.priceCalc関数内でラジオボタンのvalue値を取得
3.選択したボタンによって、料金の再計算を行う

といった流れです。
現在はラジオボタンに応じたvalue値の取得はできている状態ですが、
表にvalue値が反映していないため、それぞれ単独で動いてしまっています。

再計算ボタンを押したときにボタンと表が連動し、
value値ではなく、表そのものをpriceTableOutputに出力させる作りにするためには
どのように手直ししたら良いでしょうか？

皆さんの知恵をお借りしたいです。
よろしくお願いします。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innnerHTMLで自動生成された表を出力したい</title>

<script type="text/javascript">
//ラジオボタンのvalue値を取得
var daysRate = 1;
var nouki = document.getElementsByName("nouki");
function priceCalc(){
for(i=0; i<nouki.length; i++){
if(nouki[i].checked){
daysRate = nouki[i].value;
}
}
document.getElementById("priceTableOutput").innerHTML = daysRate;
}
</script>

</head>
<body>
再計算ボタンを押すと価格表が再計算されます。<br />
<input type="radio" name="nouki" value="1" checked="checked">通常配達
<input type="radio" name="nouki" value="1.25">翌日配達
<input type="radio" name="nouki" value="1.5">当日配達
<input type="button" value="再計算" onClick="priceCalc()">
<div id="priceTableOutput" style="background:#ccc;">innerHTMLで、ここに表を出力</div>
<br />
<script>
var price = new Array(100,300,500);
var table_start = "<table border='1'><tbody><tr>";
var table_end = "</tr></tbody></table>"
document.write(table_start);
for(var i=0; i<=2; i++){
document.write("<td width='50'>" + parseInt(price[i]) * parseFloat(daysRate) + "</td>");
}
document.write(table_end);
</script>

</body>
</html>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： LancerVII
回答日時：2013/05/17 09:10

こんにちは。

もし自分が作るならこう作るかな？とちょっと書き換えてみました。
動きは追ってみてください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innnerHTMLで自動生成された表を出力したい</title>
<script type="text/javascript">
//ラジオボタンのvalue値を取得
var daysRate;
var nouki = document.getElementsByName('nouki');
var price = new Array ( 100, 300, 500, 800 );

function getRate() {
for ( var i = 0; i < nouki.length; i ++ ) {
if ( nouki[i].checked ) {
daysRate = nouki[i].value;
}
}
return parseFloat(daysRate);
}
function calc() {

// 選択されているレートを取得
var rate = getRate();

var table_start = "<table border='1'><tbody><tr>";
var table_end = "</tr></tbody></table>"
var table_td = '';

// priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御
for ( var i = 0; i < price.length; i ++ ) {
table_td += '<td width="50">' + parseInt(price[i]) * rate + '</td>';
}

document.getElementById('priceTableOutput').innerHTML = table_start + table_td + table_end;

}

window.onload = function() {
// 読込み後も一度テーブル表示を実行する
calc();
};
</script>
</head>
<body>
再計算ボタンを押すと価格表が再計算されます。<br />
<input type="radio" name="nouki" value="1" checked="checked" />通常配達
<input type="radio" name="nouki" value="1.25" />翌日配達
<input type="radio" name="nouki" value="1.5" />当日配達
<input type="button" value="再計算" onClick="calc()">
<div id="priceTableOutput" style="background:#ccc;">innerHTMLで、ここに表を出力</div>
<br />
</body>
</html>

- 1
- 件

通報する

この回答へのお礼

LancerVIIさんおはようございます。
お早い回答どうもありがとうございます！

自分のソースを見ると、noukiはlengthで取得しているのにテーブルのループ回数はベタ打ちだったり
TABLEの開始タグと終了タグは変数で出力させているのに中身は直で出力させていたり、
ものすごく雑なものでした。

LancerVIIさんが手直しを加えてくださったプログラムは、とてもまとまった作りですごく勉強になります。
TDの部分を変数にする発想がなかったので、innerHTMLで出力する手段もDIVを3つ用意しなければいけないものかと勘違いもしていたので、もう少し柔軟な発想が出来るように勉強させていただきます。

この度は手助けしていただけて、とても感謝しています。

通報する

お礼日時：2013/05/17 09:56

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