ここから本文です

CSVファイルの表をHTMLでそのまま表示する方法を教えてください

nao********さん

2020/1/1616:53:48

CSVファイルの表をHTMLでそのまま表示する方法を教えてください

補足言語はpythonを使っていて
flaskというものを使用しています
CSVへの書き込みは終わっているので、その表をそのままウェブページへ貼り付けたいと考えています。

閲覧数:
31
回答数:
3

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ybb********さん

2020/1/1622:39:07

nao********さん

>・・・・CSVファイルの表をHTMLで・・・・・・・・・

ご参考に↓
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="tableData">データを表示</div>
<script>
// CSVファイルの読み込む関数を定義
function getCSV(){
let req = new XMLHttpRequest(); // ファイルを読込むため XMLHttpRrequestオブジェクトを生成
req.open("get", "sample.csv", true); // 読込ファイル(sample.csv)を指定
req.send(null); // HTTPリクエストの発行
// レスポンスが返ってきたらconvertCSVtoArray()を呼ぶ
req.onload = function(){
convertCSVtoArray(req.responseText); // 読み込んだ CSVデータを次に渡す
}
}

// 読み込んだ CSVデータを二次元配列に変換する関数convertCSVtoArray()の定義
function convertCSVtoArray(str){ // 読み込んだ CSVデータが文字列として渡される
let result = []; // 二次元配列を入れるための配列
let tmp = str.split("\n"); // 改行を区切り文字とした一次元配列を生成
// 各行ごとにカンマで区切った文字列を要素とした二次元配列を生成
let tbl = "<table border='1'>"; // tableを生成
for (let i=0; i<tmp.length; i++){
result[i] = tmp[i].split(','); // 二次元配列を生成
tbl += "<tr>";
for (var j=0; j<result[i].length; j++){
tbl += "<td>"+result[i][j]+"</td>"; // 各セルに二次元配列要素を記入
}
tbl +="</tr>";
}
tbl += "</table>"; // tableを閉じる
document.querySelector("#tableData").innerHTML =tbl; // tableを表示
// alert(result);
}
getCSV(); // CSVファイルの読み込む
</script>
</body>
</html>


【sample.csv】
0001,itemA,500yen
0002,itemB,300yen
0003,itemC,400yen

ベストアンサー以外の回答

1〜2件/2件中

並び替え:回答日時の
新しい順
|古い順

meg********さん

2020/1/1707:24:59

サーバ側で処理するなら、下記でどうでしょう。
※先頭のスペースが無視されてしまうので、スペースの代わりに _ を使用してます。

import csv

with open('sample.csv') as f:
____reader = csv.reader(f)
____print('<table>');
____for row in reader:
________print('<tr>');
________for col in row:
____________print('<td>' + col + '</td>')
________print('</tr>');
____print('</table>');

eos********さん

2020/1/1617:15:09

どういう状況下にて、なんのプログラミングなどで、どのように実装するのでしょうか。

拡張子を「.htm」に変更するだけでも、そのままブラウザを介して表示されると思いますけど。

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる