ウォッチ
よろしくお願いします。前回こちらで教えて頂いたソースを
基に表示するテーブルの並び方を変えたいと思っています。
理想の並び方は、例として
くま
さる くま さる
ごりら これらを→ごりら うま
うま りす
りす
というように読み込んだエクセルのレコードを2列ずつにして表したいのですが、可能でしょうか？
以下のソースを基に、色々試したのですが、ブラウザ上には何も出てきません。
--------------------------------------------------------------
<html>
<head>
<title>TEST CSV IN</title>
<script type="text/javascript">
function hoge(){
var TEST = document.getElementById("TEST");
var output = document.getElementById("OUTPUT");
var table = document.createElement("table");
table.setAttribute("border","1");
table.setAttribute("datasrc","#TEST");
var tbody = document.createElement("tbody");
var trs = new Array();
var tds = new Array();
TEST.Reset();
var rs = TEST.recordset;
while (!rs.EOF){
var tbl = document.createElement("table");
table.setAttribute("border","1");
var td = document.createElement("td");
for(var i=1; i<2; i++){
var tr = document.createElement("tr");
trs[0] = document.createElement("tr");
trs[1] = document.createElement("tr");
trs[2] = document.createElement("tr");
tds[0] = document.createElement("td");
tds[1] = document.createElement("td");
tds[2] = document.createElement("td");
var img = document.createElement("img");
img.setAttribute("src",rs.fields(0));
img.setAttribute("alt","");
tds[0].appendChild(img);
tds[1].innerText = rs.fields(1);
tds[2].innerText = rs.fields(2);
trs[0].appendChild(tds[0]);
trs[1].appendChild(tds[1]);
trs[2].appendChild(tds[2]);
tr.appendChild(trs[0]);
tr.appendChild(trs[1]);
tr.appendChild(trs[2]);
tbody.appendChild(tr);
}
rs.MoveNext;
}
table.appendChild(tbody);
output.appendChild(table);
}
</script>
</head>
<body onload="hoge();">
CSV DATA IMPORT Ver MINO
<p>
<object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="cn.csv" />
<param name="UseHeader" value="true" />
<param name="TextQualifier" value="'">
<param name="FieldDelim" value=",">
</object>
<div id="OUTPUT">
</div>
</body>
</html>
-------------------------------------------------------------
javascriptを始めたばかりなので、まだよく理解していないので
大変申し訳ありませんが、ご指導願えればと思います。
よろしくお願いします。
No.5ベストアンサー
- 回答日時：
============Q3195373-4.html========
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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;
}
-
-
- 0
- 件
-
himajin100000さん、ありがとうございます。
無事動きました。
本当に感謝致します。
himajin100000さんのソースを前回のものと見比べて
色々勉強します。
本当に助かりました、ありがとうございました。
No.4
- 回答日時：
自信ないので2パターン示す
=================--Q3195373-3.html==================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<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);
}
-
-
- 0
- 件
-
No.3
- 回答日時：
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.dt …
<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が指定されている
-
-
- 0
- 件
-
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
のように、縦に表示というのは可能でしょうか？
面倒な質問をして申し訳ありません。自分のほうでも
色々記述してみてるのですが、うまく行かず状態で・・。
また再度がんばってみます。
No.1
- 回答日時：
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.dt …
<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);
}
-
-
- 0
- 件
-
himajin100000さん、前回同様書き込みありがとうございます。
早速試してみたいと思います。
ソースを記述する際、ご指摘どおり、予想しながら
やってるのですが、まだまだですね、もっと勉強します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！
似たような質問が見つかりました
- その他（プログラミング・Web制作） python 気象データの取得 2 2023/06/20 23:54
- JavaScript EasyUIのSubGrid（jquery）におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- Visual Basic（VBA） Selenium.ChromeDriverの使い方について 7 2022/09/22 06:43
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript javascriptでテーブルに追加した項目のid追加してローカルストレージを操作したい 5 2023/01/01 15:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
この将棋プログラムに王様ゲッ...
-
google apps scriptの終了のさせ方
-
翌月を取得するGASが分かりません
-
ジェネレーターの作り方
-
イベントが初めの一回しか起き...
-
C#OpenCv V4にのエラーに関する...
-
初回訪問（アクセス）日時の取...
-
html javascript リンク先アド...
-
FCKeditorで画像登録ができませ...
-
APIを使って埋め込んだグーグル...
-
GoogleMapのAPIで初期の地図の表示
-
C#で、ContextMenuStripに動的...
-
VSCODE[Python]の設定について
-
JavaScriptで文字列の特定文字...
-
GASでundefinedエラーが出ます
-
ASP.NETのコントロールの値をJa...
-
JSONPを処理するにはどうすれば...
-
記述方法について
-
colorbox (オーバレイでの向き...
-
javaScriptのコードの修正をお...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
google apps scriptの終了のさせ方
-
C#OpenCv V4にのエラーに関する...
-
なぜmatchメソッドがエラーにな...
-
GASでundefinedエラーが出ます
-
ジェネレーターの作り方
-
html javascript リンク先アド...
-
gas スプレッドシートがアクテ...
-
翌月を取得するGASが分かりません
-
ASP.NETのコントロールの値をJa...
-
C# 演算 奇数と偶数 表現の仕方
-
javascriptでiframeのURL変更は？
-
C#で、ContextMenuStripに動的...
-
ASP.NET MVCでObjectをjsに渡す
-
1日1回引けるJavaScriptおみく...
-
javascriptでテーブルに追加し...
-
JavaScriptを使って毎日決まっ...
-
googleスプレッドシートのApps ...
-
JavaScriptで文字列の特定文字...
-
アクセス時からのカウントダウ...
-
ローカルにあるファイルを検索...
おすすめ情報
