innerHTMLでのテーブル作成
- JavaScriptを使用してinnerHTMLでテーブルを自動生成し、表示する方法について説明します。
- ラジオボタンの値に応じてテーブルを再計算し、更新する仕組みを作成します。
- 表の項目名が上書きされるため、テーブルがずれて表示されてしまう問題があります。
- ベストアンサー
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>
- chocotarosu
- お礼率93% (14/15)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#1 で DOM に挑戦するとのことでしたので、私も挑戦してみました。 DOMっぽい長ったらしい記述は関数 tagOn に閉じ込めたり、今時のスクリプト記述を利用したりしたので、割とすんなり書けましたが難解になったかと反省しております。 何かの参考になれば幸いです。 <!DOCTYPE html> <script>addEventListener('load',function(e){ // イマドキの window.onload function tagOn(p,n,t) { ' '; var e = p.appendChild(document.createElement(n)); ' '; if (typeof t == 'string') { ' '; e.appendChild(document.createTextNode(t)); // 要素配下にテキストを追加 ' '; } else if (t instanceof Array) { ' '; tagOn.apply(this,[e].concat(t)); // 再帰を使って、要素配下に要素を追加 ' '; } ' '; return e; } function readRadio(radios) { ' '; for (var i = 0; i < radios.length; i++) if (radios[i].checked) return radios[i].value; ' '; return undefined; } var PRICES = [ // JSONっぽいデータ構造にして汎用化 { name:'あれ', price:10 }, { name:'これ', price:30 }, { name:'それ', price:50 } ]; function makeTable(root, rate) { ' '; var t = tagOn(root,'table'); t.border = true; ' '; var h = tagOn(t,'thead'); ' '; var hr = tagOn(h,'tr',['th','個数']); // 再帰のおかげで、一行で多重階層が記述できて便利 ' '; PRICES.forEach(function(o){ tagOn(hr,'th',o.name) }); // イマドキの for 句 ' '; var b = tagOn(t,'tbody'); ' '; for (var i = 0; i < 2; i++) { ' '; var n = (i+1) * 50; ' '; var f = function(p){ return '￥' + (p * n * rate) }; // ラムダ式っぽい記述 ' '; var br = tagOn(b,'tr',['td', n+'個']); ' '; PRICES.forEach(function(o){ tagOn(br,'td',f(o.price)) }); ' '; } } function calc(ev){ ' '; if (ev) ev.preventDefault(); ' '; var form = document.forms['casio']; ' '; var rate = parseFloat(readRadio(form.elements['nouki'])); ' '; var root = document.querySelector('.rateTable'); // jQueryっぽい記述 ' '; while (root.firstChild) root.removeChild(root.firstChild); // 追加前に全削除 ' '; tagOn(root, 'h2', '表1'); ' '; makeTable(root, rate); } calc(); document.forms['casio'].addEventListener('submit', calc, false); // HTMLに関数を書かない工夫 },false);</script> <p> 再計算ボタンを押すと価格表が再計算されます。 <form name=casio> <p> <label><input type=radio name=nouki value="1" checked>通常配達</label> <label><input type=radio name=nouki value="1.25">翌日配達</label> <label><input type=radio name=nouki value="1.5">当日配達</label> <button type=submit>再計算</button> <div class=rateTable></div> </form>
その他の回答 (3)
- zousan77
- ベストアンサー率0% (0/1)
レスついているので書くまでもないんですけど、 制御構造が迂遠すぎ．．． こったアルゴリスム組みたいのなら他で何かで (趣味で制御構造以外も変更しています） <!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> table{ border:none; font-size:12px;} table thead tr th{ padding:5px; width:90px; background:#69F;} table tr td{ padding:5px; text-align:right; background:#9CF;} table tr th{ padding:5px; width:90px; background:#CCCCCC;} caption { color: #900; caption-side: left; text-align: left; font-size:large;} </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('表1','<h2>表2</h2>','<h2>表3</h2'); var table_start= "<div><table><caption>"; var table_head= '</caption><thead><tr><th>入数</th><th>ヘッダー1</th><th>ヘッダー2</th><th>ヘッダー3</th></tr></thead><tbody>'; var table_end= "</tbody></table></div><hr />"; var sss = table_start + list_name[0] + table_head; for(var i=50; i<=100; i+=50){ sss += '<tr><th>' + i + '個</th>'; for ( var j = 0; j < price.length; j ++ ) { sss += '<td>￥' + parseInt(price[j]*i) * rate + '</td>'; } sss +='</tr>'; } sss += table_end; document.getElementById('priceTableOutput').innerHTML = sss; } 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>
お礼
zousan77さんありがとうございます。お返事が遅くなりました。 出力部分の記述がとてもスッキリしているので、規則性のあるテーブルの場合にすごく参考になります！ 規則性のないテーブルの場合を考えてのifでの分岐だったので、その辺り記述しておらず申し訳ないです；
- fujillin
- ベストアンサー率61% (1594/2576)
回答はすでに出ているようですが… 内容的に選択肢が数種類程度と想像しますので、わざわざ（難しい？）計算をさせなくてもすむ方法としてこんなのはどうでしょうか。 単純に順番が同じものを表示しているだけなので、項目数が変わったり、選択内容によって行数が異なるような場合でもそのままで使えるのではないかと思います。 上述のように、順序だけを利用していますので、inputのvalue値は使用していませんし、スクリプトでの計算も不要になります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> 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> </head> <body> <div id="hoge"> 再計算ボタンを押すと価格表が再計算されます。<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(this)"> </div> <table id="fuga"> <thead> <tr><th>入数</th><th>項目1</th><th>項目2</th></tr> </thead> <tbody> <tr><th>50個</th><td>通常50-1</td><td>通常50-2</td></tr> <tr><th>100個</th><td>通常100-1</td><td>通常100-2</td></tr> </tbody> <tbody> <tr><th>50個</th><td>翌日50-1</td><td>翌日50-2</td></tr> <tr><th>100個</th><td>翌日100-1</td><td>翌日100-2</td></tr> </tbody> <tbody> <tr><th>50個</th><td>当日50-1</td><td>当日50-2</td></tr> <tr><th>100個</th><td>当日100-2</td><td>当日100-2</td></tr> </tbody> </table> <script type="text/javascript"> function calc(){ var i, j; var elms = document.getElementById("hoge").getElementsByTagName("input"); for(i=0; i<elms.length-1; i++) if(elms[i].type=="radio" && elms[i].checked) break; elms = document.getElementById("fuga").getElementsByTagName("tbody"); for(j=0; j<elms.length; j++) elms[j].style.display = i==j?"":"none"; } calc(); </script> </body> </html>
お礼
fujillinさんありがとうございます。 こういうやり方もあるんですね。計算するまでもなく、規模の小さな表組みに使えそうなので、こちらも参考にさせていただきます。 どうもありがとうございます！
- Ogre7077
- ベストアンサー率65% (170/258)
変数 table_kosuu と table_td の編集方法と、innerHTML に設定するタイミングが間違っています。 直し方としては、以下をお勧めします。 var tableStart = "<table><thead><tr><th>あ<th>い<th>う"; var tableBody = "<tbody>"; var tableEnd = "</table>"; for (...) { tableBody += "<tr><td>個数の内容"; // table_kosuu と同じ for(...) { tableBody += "<td>金額の内容"; // table_td と同じ } // ここで設定しない } 対象要素.innerHTML = tableStart + tableBody + tableEnd; // ループ後に設定 余談ではありますが、この様に少々面倒な生成を行うならば innerHTML ではなく DOM を利用することを検討なされてはいかがでしょうか。使い勝手が少々面倒ですが、XHTML 的に間違いのない生成が保障されていますので、結局は一番楽になると思います。
お礼
Ogre7077さん、今回もありがとうございます！ お礼が遅くなってしまい、申し訳ないです。 修正箇所の指摘を受け修正を行いalertでプログラムの動きを見たところ、問題なく生成されたのを確認できました。 DOMについても調べてみたところ、innerHTMLよりもDOMを使ったほうが良い場面も多いようでしたので、仰るとおりDOMでの生成にもチャレンジします。 ベストアンサーを差し上げたいところですが、また詰まることがあるかも知れませんので、DOMで作り終えるまでもう少し記事を閉じないでおこうと思います。
関連するQ&A
- JS テーブルデータ：シャッフル関数の修正
JavaScript テーブルデータ：シャッフル関数の不具合を修正するには？ ここに１つのテーブルがあります。 tbody td のセルデータをシャッフルする関数を作ってみました。 どこをどのように修正したらよいのでしょうか？ 今のところ、下記の不具合があります。 ■ 行のシャッフルは出来るが、列のシャッフルがされていない （すべてのＴＤ内のシャッフルをしたい） ＜仕様＞ ・ボタンを押すごとに テーブル内を並べ替える ・thの内容は固定 ・並べ替えるのは tbody tdの内容 [HTML] <button id="button2">シャッフル</button> <table id="table5" border="1"> <thead> <tr> <th></th> <th>A</th> <th>B</th> <th>C</th> <th>D</th> <th>E</th> <th>F</th> <th>G</th> <th>H</th> <th>I</th> <th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>春</td> <td>夏</td> <td>秋</td> <td>冬</td> <td>朝</td> <td>昼</td> <td>番</td> <td>花</td> <td>鳥</td> <td>風</td> </tr> <tr> <th>2</th> <td>月</td> <td>天</td> <td>地</td> <td>人</td> <td>愛</td> <td>4.3</td> <td>3.5</td> <td>8.4</td> <td>6.1</td> <td>6.4</td> </tr> <tr> <th>3</th> <td>1.8</td> <td>7.8</td> <td>1.4</td> <td>7.5</td> <td>6.2</td> <td>6.5</td> <td>5.1</td> <td>7.9</td> <td>7.2</td> <td>2.8</td> </tr> <tr> <th>4</th> <td>83</td> <td>64</td> <td>18</td> <td>51</td> <td>36</td> <td>45</td> <td>84</td> <td>22</td> <td>16</td> <td>25</td> </tr> <tr> <th>5</th> <td>arm</td> <td>bat</td> <td>cat</td> <td>dog</td> <td>egg</td> <td>fig</td> <td>gal</td> <td>hit</td> <td>ink</td> <td>joy</td> </tr> </tbody> </table> <script> //試作中 document.getElementById("button2").onclick = function (){ Array.prototype.shuffle = function(){ var t=this,a=t.length,b=[],c=a,i,r; for(i=0;i<a;i++)b[i]=t[i]; for(i=0;i<a-1;i++){ r=Math.floor(Math.random()*c); t[i]=b[r];b[r]=b[c-1];c--; } t[a-1] = b[0]; return t; }; var subject = document.querySelector("#table5 tbody"); var rowData = []; var rows = subject.getElementsByTagName("TR"); var cells; var i, j; for (i=0; i<rows.length; i++) { rowData[i] = []; cells = rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { rowData[i][j] = cells[j].innerHTML; } } rowData.shuffle(); for (i=0; i<rowData.length; i++) { cells=rows[i].getElementsByTagName("TD"); for (j=0; j<cells.length; j++) { cells[j].innerHTML = rowData[i][j]; } } } </script>
- ベストアンサー
- JavaScript
- テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。
- 締切済み
- JavaScript
- テーブルの変数について
var i; i=10; <table> <tr> <th>見出し</th> <th>見出し</th> </tr> <tr> <td>i<td> <td>data</td> </tr> </table> このようなプログラムを作ったのですが変数の「i」がそのまま表示されてしまうのでどうしたら「i」の中の数字を表示することができるのしょうか。初心者なのでまだまだわからないことがたくさんありますがよろしくお願いします。
- 締切済み
- JavaScript
- HTMLのテーブルについて
HTMLのテーブルについて 今、HTMLを勉強しています。下記のようにテーブルを作成し一部にセルの結合を行ったところ、(2)の結合したセル右端から外枠までが広がってしまいます。せっかく綺麗に見えるように上の表と下の表のセル幅を合わせても、上の表の右端が出っ張ってしまって意味がありません。 これを解決するにはどのように改善すればいいのでしょうか？ <html> <head> <title>A</title> </head> <body> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>１</td> <td>Ａ君</td> <td>(1)</td> </tr> <tr> <td>１</td> <td>Ｂ君</td> <td rowspan="2">(2)</td> </tr> <tr> <td>１</td> <td>Ｃ君</td> <td></td> </tr> </table> <br> <table border="2"> <tr> <th>No.</th> <th>名前</th> <th width="50">備考</th> </tr> <tr> <td>２</td> <td>Ｄ君</td> <td>(3)</td> </tr> <tr> <td>２</td> <td>Ｅ君</td> <td>(4)</td> </tr> <tr> <td>２</td> <td>Ｆ君</td> <td>(5)</td> </tr> </table> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- ＨＴＭＬ 複雑なテーブルの作成
今、ＨＴＭＬでテーブルを作成しています。 よろしくお願いします。 下記のHTMLでテーブルを作成し 番号「１８」までは、うまくいきました。 つぎに「１９」を作成しようとすると 「９」のセル（rowspan="5"）が下に伸びて、「１９」に重なります。 何か、解決の方法はありますでしょうか？ ＣＳＳでborderやclassを使用していますが省略しています。 また、widthも使用していますが省略しています。 <table cellspacing="7"> <tr> <th colspan="2">１</th> <th>２</th> <th>３</th> <th>４</th> <th>５</th> <th>６</th> </tr> <tr> <td>７</td> <td>８</td> <td rowpan="5">９</td> <td>１０</td> <td>１１</td> <td>１２</td> <td>１３</td> </tr> <tr> <td colspan="2">１４</td> <td>１５</td> <td>１６</td> <td>１７</td> <td>１８</td> </tr> <tr> <td colspan="7">１９</td> </tr> </table>
- ベストアンサー
- CSS
- テーブルについて教えてください
テーブルについて教えてください <table border="1"> <tr> <th colspan="3">見出し</th> </tr> <tr> <th>1</th> <td rowspan="3">A</td> <td rowspan="3">B</td> </tr> <tr> <th>2</th> </tr> <tr> <th>3</th> </tr> </table> |---------------------| |------|---------------| |------| | |------| | |------|--------------| 絵が少しおかしいかも知れませんが・・・上の絵のような感じのテーブル枠になると思います 下の絵のように上の物の一番下にもう一列、縦割していない物を追加したいのですが、どうすればいいでしょうか？ 別に新たにテーブルを作ると切れ目が出来てしまうのでできればそれは避けたいです |---------------------| |------|---------------| |------| | |------| | |------|--------------| |---------------------| よろしくお願いします
- ベストアンサー
- HTML
- tableの中のtableが追加できない。
罫表追加ボタンを押すと既存のtableの中に新しくtableを追加する 処理を作成しましたが、追加した罫表が正しく表示されません。 罫表追加後、innerHTMLでテキストボックスに表示し、それをコピーして、HTMLで開いてみるときちんと追加されているようです。 なぜtableの中のtableが作られないのでしょうか。 別の方法でも良いので、ボタンをおした時に動的にtableの中にtableを追加する方法ありますでしょうか。 以下HTMLとjsです。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="kei_test.js"></script> </head> <body> <div> <input type="button" value="罫表追加" onclick="addDanraku('keihyou')" /> </div> <form name='form1'> <input type="text" name="strJbnTxt" size=100 maxlength=10000 /> </form> <table width="100%" border=1 style='border-collapse:collapse;border:none'> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt'> <p>あいうえお。</p> </td> </tr> <tr> <td style='width:100.0%;border:solid windowtext 1.0pt;'> <p>かきくけこ。</p> </td> </tr> </table> </body> </html> 以下jsファイル var cellCnt = 0; var rowArray = new Array(100); var colArray = new Array(100); window.onload = init; function init(){ var mouseFlg = 0; var col; var row; var td = document.getElementsByTagName("td"); var length = td.length; //alert('td数:'+length); for(var i = 0; i < length; i++) { td[i].onclick = function (){ this.style.backgroundColor = "yellow"; //列番号取得 var befTd = this.previousSibling; var col = 0; while(befTd){ if(befTd.nodeName=="TD")col++; befTd=befTd.previousSibling; } //行番号取得 var befTr = this.parentNode.previousSibling; var row=0; while(befTr){ if(befTr.nodeName=="TR") row++; befTr=befTr.previousSibling; } rowArray[cellCnt] = row; colArray[cellCnt] = col; cellCnt = cellCnt + 1; } } } function addDanraku( danraku ){ if( cellCnt != 1){ alert("１つのみ選択して実行してください。"); return; } //trを取得 var trNode = document.getElementsByTagName("tr"); var trLength = trNode.length; for(var i = 0; i < trLength; i++) { if( i == rowArray[0]){ //新しい段落（tr）を追加 var newTr = document.createElement("tr"); var nextTr = trNode[i].nextSibling; var oyaTable = nextTr.parentNode; oyaTable.insertBefore(newTr, nextTr); //tdを追加 var newTd = document.createElement("td"); newTd.style.width = "100.0%"; newTd.style.border = "solid windowtext 1.0pt"; newTr.appendChild(newTd); //tableノードを追加 alert(newTd.nodeName); var newTable = document.createElement("table"); newTable.style.border = "none"; newTable.style.borderCollapse = "collapse"; newTd.appendChild(newTable); //trノードを追加 for(var j = 0; j < 2; j++) { var newTr2 = document.createElement("tr"); newTable.appendChild(newTr2); for(var k = 0; k < 2; k++) { //tdノードを追加 var newTd2 = document.createElement("td"); newTd2.style.width = "100.0pt"; newTd2.style.border = "solid windowtext 1.0pt"; newTr2.appendChild(newTd2); //pノードを追加 var newP2 = document.createElement("p"); newTd2.appendChild(newP2); //textノードを追加 var newText2 = document.createTextNode("追加テスト"); newP2.appendChild(newText2); } } } } form1.strJbnTxt.value = newTr.parentNode.parentNode.parentNode.innerHTML; }
- ベストアンサー
- JavaScript
- innerHTMLで自動生成された表を出力させたい
いつもお世話になっています。 タイトルの通り、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-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> <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>
- ベストアンサー
- JavaScript
- jquery input 要素取得
失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>
- ベストアンサー
- JavaScript
- テーブルの行削除について
以前、テーブルの行追加について教えてもらい出来ましたが 逆に、追加された行を削除する方法を教えてください。 <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS"> <TITLE>行追加・削除</TITLE> </HEAD> <BODY> <TABLE BORDER="1" id="Table1"> <TR> <TH>タイトルA</TH> <TH>タイトルB</TH> </TR> <TR> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="A" VALUE=""></TD> <TD><INPUT TYPE="text" SIZE="18" MAXLENGTH="18" NAME="B" VALUE=""></TD> </TR> </TABLE> <INPUT TYPE="button" VALUE="行追加" onclick="addRow()"> <INPUT TYPE="button" VALUE="行削除"> <script language="JavaScript"> function addRow() { var tbl = document.getElementById("Table1").firstChild; if (!tbl.tagName) { tbl = document.getElementById("Table1"); } var tr = document.createElement("tr"); var td1 = document.createElement("td"); var tx1 = document.createElement("input"); tx1.setAttribute("type","text"); tx1.setAttribute("size","18"); tx1.setAttribute("maxlength","18"); tx1.setAttribute("name","Cn"); tx1.setAttribute("value",""); td1.appendChild(tx1); var td2 = document.createElement("td"); var tx2 = document.createElement("input"); tx2.setAttribute("type","text"); tx2.setAttribute("size","18"); tx2.setAttribute("maxlength","18"); tx2.setAttribute("name","Cn"); tx2.setAttribute("value",""); td2.appendChild(tx2); tr.appendChild(td1); tr.appendChild(td2); tbl.appendChild(tr); } </script> </BODY> </HTML>
- ベストアンサー
- JavaScript
お礼
Ogre7077さんいつもありがとうございます！お返事遅くなりまして、申し訳ないです。 自分の今のレベルだとじっくりと読まないと理解できないところだと感じましたので、 まず先にお礼をさせて頂きます。 自分の調べた方法ではもっとごちゃごちゃとした感じの表が出来上がりそうだったのですが、自分で作っていたものよりはるかにスマートになっておりましたので、DOMの表作成についてはOgre7077さんのアンサーを参考にさせて頂きます。 皆さんのおかげで新しい知識を楽しく身につけることができました。 どうもありがとうございます。