- ベストアンサー
innerHTMLでのテーブル作成
zousan77の回答
- 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>
関連する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
お礼
zousan77さんありがとうございます。お返事が遅くなりました。 出力部分の記述がとてもスッキリしているので、規則性のあるテーブルの場合にすごく参考になります！ 規則性のないテーブルの場合を考えてのifでの分岐だったので、その辺り記述しておらず申し訳ないです；