いつもお世話になっています。
タイトルの通り、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>
No.1ベストアンサー
- 回答日時:
こんにちは。
もし自分が作るならこう作るかな?とちょっと書き換えてみました。
動きは追ってみてください。
<!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>
LancerVIIさんおはようございます。
お早い回答どうもありがとうございます!
自分のソースを見ると、noukiはlengthで取得しているのにテーブルのループ回数はベタ打ちだったり
TABLEの開始タグと終了タグは変数で出力させているのに中身は直で出力させていたり、
ものすごく雑なものでした。
LancerVIIさんが手直しを加えてくださったプログラムは、とてもまとまった作りですごく勉強になります。
TDの部分を変数にする発想がなかったので、innerHTMLで出力する手段もDIVを3つ用意しなければいけないものかと勘違いもしていたので、もう少し柔軟な発想が出来るように勉強させていただきます。
この度は手助けしていただけて、とても感謝しています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
テーブル内のチェックボックス...
-
JavaScriptでリストボックスに...
-
JavaScriptの「.querySelectorA...
-
onClickで足し算をして答えを出...
-
画面の2重起動をチェックする...
-
同一nameの input type="text"...
-
フォーム2度押禁止ボタンscript...
-
ラジオボタンが選択されたらテ...
-
formで項目を連結したい
-
VBSでの自動ログイン
-
ラジオボタンを一括で操作する...
-
jQueryで合計を出したい
-
return trueとreturn falseの用...
-
プルダウン選択を変更すると、...
-
value内に変数を入れたい
-
<JavaScript>tableタグを入力不...
-
【javascript・PHP】プルダウン...
-
JSPとJavaScriptの連携について...
-
連動プルダウンのclonenode
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
チェックボックス付きのテーブ...
-
JavaScriptの「.querySelectorA...
-
formで項目を連結したい
-
Formのシリアライズができない
-
画面表示とともにtableの指定の...
-
文字数を数える際に空白、改行...
-
クリックしたラジオボタンの行...
-
ラジオボタンを一括で操作する...
-
画面の2重起動をチェックする...
-
ラジオボタンとテキストボック...
-
Javascriptの電卓で最初の何も...
-
入力チェックの外部スクリプト...
-
JavaScriptによる自動計算フォーム
-
複数のselect値で1つも選択され...
-
javascriptで表(テーブル)の自...
-
jQueryで合計を出したい
-
localStorageでのcheckbox制御
-
JavaScriptで、コピーボタンを...
-
Javascriptで自動的に計算する...
-
WEBフォーム(asp)から画像デ...
おすすめ情報