zousan77のプロフィール

@zousan77 zousan77
ありがとう数1
質問数1
回答数1
ベストアンサー数
0
ベストアンサー率
0%
お礼率
0%

  • 登録日2013/05/14
  • innerHTMLでのテーブル作成

    いつもお世話になっております。 こちらの質問と回答を参考にプログラムを付け足して、リストを作る練習をしています。 http://okwave.jp/qa/q8090793.html テーブル行の先頭に項目名を表示させて、表を分かりやすくしようと思ったのですが、 最後に出力される項目名がそれまでの項目名を上書きしてしまい、 項目名が1個しか表示されないため、テーブルがずれて表示されてしまいます。 50個　金額～～ 100個　金額～～ と表示させるためには、どこを手直ししたら良いのか知恵を貸してください。 よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innnerHTMLで自動生成された表を出力したい</title> <style> h2 { margin-bottom:0; color:#900;} table{ border:none; font-size:12px;} table tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} </style> <script type="text/javascript"> //ラジオボタンのvalue値を取得 var daysRate; var nouki = document.getElementsByName('nouki'); var price = new Array ( 10, 30, 50 ); 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 list_name = new Array('<h2>表1</h2>','<h2>表2</h2>','<h2>表3</h2'); var table_start = "<div><table><tbody>"; var table_head = '<tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr>'; var table_kosuu = ""; var table_td = ""; var table_end = "</tbody></table></div><hr />"; // priceが増えてもロジックをいじる必要がないようにprice.lengthでループ数を制御 for(var i=50; i<=100; i+=50){ if(i==50){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } if(i==100){ table_kosuu = '<tr><td>' + i + '個</td>'; for ( var j = 0; j < price.length; j ++ ) { if(j < price.length-1){ table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } else { table_td += '<td>￥' + parseInt(price[j]*i) * rate + '</td></tr>'; } } } document.getElementById('priceTableOutput').innerHTML = list_name[0] + table_start + table_head + table_kosuu + 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">innerHTMLで、ここに表を出力</div> <br /> </body> </html>

もっと見る