- ベストアンサー
記述方法について
- 前回教えていただいたソースを基に表示するテーブルの並び方を変えたい。
- 読み込んだエクセルのレコードを2列ずつにして表にしたい。
- 試した結果、ブラウザ上に何も表示されない。
- hajimete-san
- お礼率60% (35/58)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
============Q3195373-4.html======== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>Q3195373 テストケース4</title> <script type="text/javascript" src="Q3195373-4.js"></script> <style type="text/css"> table{ border-collapse:separate; } table,tbody,tr,th,td{ border-style:solid; } </style> </head> <body onload="hoge(2);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> ==========Q3195373-4.js========= function hoge(column1){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; /* 最初に全データを格納してしまう */ while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } index = index + 1; rs.MoveNext; } index = index - 1; /* 必要な行数を求める */ var max = row(index * rs.fields.count,column1,rs.fields.count); /* 行が丁度で終わるかどうか。終わらないとtrue */ var flag = (index % column1 != 0); /* 行数が求まったところで配列を初期化。位置を決めていく順序の関係で，先に作っておく */ var trs = new Array(max+1); for ( var i = 1;i < max+1 ;i++){ trs[i] = document.createElement("tr"); } /* 順番にしきつめていく*/ for ( var i = 1;i <= rs.fields.count * column1 * Math.floor(index / column1) ;i++){ trs[row(i,column1,rs.fields.count)].appendChild(tds[i]); } /*行が終わらなかったとき */ if (flag){ for (var j = 1 ; j <=rs.fields.count;j++){ /* 余った分を行内に配置して */ for(var k = 1;k <= index % column1;k++){ trs[row(rs.fields.count * column1 * Math.floor(index / column1) + j,column1,rs.fields.count) ].appendChild(tds[rs.fields.count * column1 * Math.floor(index / column1) + rs.fields.count * (k-1) + j ]); } /* 行に足りなかった分を補う */ for(var k = index % column1 + 1;k <= column1 ;k++){ var newtd = document.createElement("td"); var newtext = document.createTextNode(" "); newtd.appendChild(newtext) trs[row(rs.fields.count * column1 * Math.floor(index / column1) + j,column1,rs.fields.count) ].appendChild(newtd); } } } /* 全ての行の処理が終わったらtbodyへの追加*/ for ( var i = 1;i <= max ;i++){ tbody.appendChild(trs[i]); } /* tableに追加して */ table.appendChild(tbody); /* 出力エリアに追加 */ output.appendChild(table); } function row(N,column,fieldcount){ var group = Math.floor((N-1)/(fieldcount * column)); return fieldcount * group + ((N-1) - fieldcount * column * group) % fieldcount + 1; }
その他の回答 (4)
- himajin100000
- ベストアンサー率54% (1660/3060)
自信ないので2パターン示す =================--Q3195373-3.html================== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>Q3195373 テストケース3</title> <script type="text/javascript" src="Q3195373-3.js"></script> </head> <body onload="hoge();"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> =============Q3195373-3.js================ function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } index = index + 1; rs.MoveNext; } index = index - 1; for (i = rs.fields.count - 1;i>=0;i-- ){ trs[rs.fields.count-i-1] = document.createElement("tr"); for(j = rs.fields.count - i;j <= 3 * index ;j=j+rs.fields.count){ trs[rs.fields.count-i-1].appendChild(tds[j]); } } for (var i = 0;i <= trs.length - 1 ;i++ ){ tbody.appendChild(trs[i]); } table.appendChild(tbody); output.appendChild(table); }
- himajin100000
- ベストアンサー率54% (1660/3060)
Q3195373-2.js function hoge(count){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ tds[rs.fields.count * index - i ] = document.createElement("td"); tds[rs.fields.count * index - i ].appendChild(document.createTextNode(rs.fields(rs.fields.count - i - 1))); } if (index % count == 0){ trs[index / count - 1] = document.createElement("tr"); for (var j = count - 1;j >= 0 ;j--){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ trs[index / count - 1].appendChild(tds[rs.fields.count * index - rs.fields.count * j - i]); } } } index = index + 1; rs.MoveNext; } index = index - 1; if (index % count != 0){ trs[Math.floor(index / count)] = document.createElement("tr"); for (var j = (index % count) - 1;j >= 0 ;j--){ for (var i = rs.fields.count - 1;i >= 0 ;i--){ trs[Math.floor(index / count)].appendChild(tds[rs.fields.count * index - rs.fields.count * j - i]); } } index = Math.ceil(index / count) * count; } for (var i = 0;i <= index / count - 1 ;i++ ){ tbody.appendChild(trs[i]); } table.appendChild(tbody); output.appendChild(table); } Q3195373-2.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript" src="Q3195373-1.js"></script> </head> <body onload="hoge(2);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> Q3195373-2.csv Q3195373-1.csvと同じく 正直二次元配列使えばもっと簡単にできた気がする。 hoge関数の引数で 何レコードをセットにするか決定できる。 今回は2レコードがセットなので2が指定されている
お礼
himajin100000さん、無事理想の動きが出来るようになりました。 ありがとうございました。 もうひとつ質問があります。上記のソースをもとに 今の動きですと、 a1-1 a1-2 a1-3 b2-1 b2-2 b2-3 c3-1 c3-2 c3-3 d4-1 d4-2 d4-3 というようにエクセルデータの行をそのまま横ですが、これを a1-1 b2-1 a1-2 b2-2 a1-3 b2-3 のように、縦に表示というのは可能でしょうか？ 面倒な質問をして申し訳ありません。自分のほうでも 色々記述してみてるのですが、うまく行かず状態で・・。 また再度がんばってみます。
- himajin100000
- ベストアンサー率54% (1660/3060)
ソースコードに汎用性を持たせるために作業中です。 しばらくお待ちください
- himajin100000
- ベストアンサー率54% (1660/3060)
Q3163593のhimajin100000です。 HTMLの完成予想図をきちんと頭の中で想像してください。 前回のサンプルを使います。 Q3195373-1.csv 'img','name','phone' 'img/a01.jpg','a01','001-001' 'img/a02.jpg','a02','002-002' 'img/a03.jpg','a03','003-003' 'img/a04.jpg','a04','004-004' 'img/a05.jpg','a05','005-005' 'img/a06.jpg','a06','006-006' 'img/a07.jpg','a07','007-007' 'img/a08.jpg','a08','008-008' 'img/a09.jpg','a09','009-009' Q3195373-1.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <script type="text/javascript" src="Q3195373-1.js"></script> </head> <body onload="hoge();"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="Q3195373-1.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div> </body> </html> Q3195373-1.js function hoge(){ var TEST = document.getElementById("TEST"); var output = document.getElementById("OUTPUT"); var table = document.createElement("table"); table.setAttribute("datasrc","#TEST"); var tbody = document.createElement("tbody"); var trs = new Array(); var tds = new Array(); var headercount = 3; TEST.Reset(); var rs = TEST.recordset; var index = 1; while (!rs.EOF){ tds[3 * index - 2] = document.createElement("td"); tds[3 * index - 1] = document.createElement("td"); tds[3 * index] = document.createElement("td"); tds[3 * index - 2].innerText = rs.fields(0); tds[3 * index - 1].innerText = rs.fields(1); tds[3 * index].innerText = rs.fields(2); if (index % 2 == 0){ trs[index / 2] = document.createElement("tr"); trs[index / 2].appendChild(tds[3 * (index-1) -2] ); trs[index / 2].appendChild(tds[3 * (index-1)-1] ); trs[index / 2].appendChild(tds[3 * (index-1)-0] ); trs[index / 2].appendChild(tds[3 * index -2 ] ); trs[index / 2].appendChild(tds[3 * index -1 ] ); trs[index / 2].appendChild(tds[3 * index -0 ] ); } index = index + 1; rs.MoveNext; } if (index % 2 == 0){ trs[index / 2] = document.createElement("tr"); trs[index / 2].appendChild(tds[3 * (index-1) - 2] ); trs[index / 2].appendChild(tds[3 * (index-1) - 1] ); trs[index / 2].appendChild(tds[3 * (index-1) - 0] ); } for (var i = 1;i <= index / 2;i++ ){ tbody.appendChild(trs[i]); } alert(tbody.getElementsByTagName("tr").length); table.appendChild(tbody); output.appendChild(table); }
お礼
himajin100000さん、前回同様書き込みありがとうございます。 早速試してみたいと思います。 ソースを記述する際、ご指摘どおり、予想しながら やってるのですが、まだまだですね、もっと勉強します。
お礼
himajin100000さん、ありがとうございます。 無事動きました。 本当に感謝致します。 himajin100000さんのソースを前回のものと見比べて 色々勉強します。 本当に助かりました、ありがとうございました。