jQueryでCSVを読み込んでみる

jQueryでCSVを読み込み、表示させるサンプルを作成しました。

使用するライブラリ・ファイル

今回jQuery.csv.jsを使おうと思ったのですが、本家jQueryのサイトからはなくなっているようなので、
こちらのサイトのものを使用させていただきました。
 

読み込むCSVは以下の内容です。
CSVファイルサンプル

id date title sentence image
00001 14/11/02 タイトルA 説明文A img01.gif
00002 14/11/03 タイトルB 説明文B img02.gif
00003 14/11/04 タイトルC 説明文C img03.gif
00004 14/11/05 タイトルD 説明文D img04.gif
00005 14/11/06 タイトルE 説明文E img05.gif

CSVファイルの文字コードはUTF-8ですが、エクセルで作成した後はShift-jisになっているので、
文字コードをUTF-8に変更する必要があります。
 

サンプルコード

JavaScript

$(function() {
	var target = '#news';
	var csvList;
	var insert = '';
	$.ajax({
		url: 'list.csv',
		success: function(data) {

			// csvを配列に格納
			csvList = $.csv()(data);

			// 挿入するHTMLを作成
			for (var i = 1; i < csvList.length; i++) {
				insert += '<li id="' + csvList[i][0] + '">';
				insert += '<div class="image"><img src="' + csvList[i][4] + '" /></div>';
				insert += '<p class="date">' + csvList[i][1] + '</p>';
				insert += '<p class="title">' + csvList[i][2] + '</p>';
				insert += '<p class="sentence">' + csvList[i][3] + '</p>';
				insert += '</li>';
			};
			$(target).append(insert);
		}
	});
});

HTML

<ul id="news"></ul>

CSVファイル読み込みのデモページ

このエントリーをはてなブックマークに追加

関連記事

2件のコメント

  1. […] 参考と素材 ホバーの動き:Hover.css クリック時の回転:CSS3でアニメーション【vol.4】- クリックでアニメーションを実行させる方法(複数同時実行例含む) おみくじの筒画像:おみくじの入っている筒を描いたイラスト。お正月の初詣のデザインに。 CSVの読み込みについて:jQueryでCSVを読み込んでみる […]

jQueryでCSVデータを扱いHTMLを書くのに便利なライブラリ「jquery.csv.js」 | ホームページ制作 SEO対策 福岡のアイドットデザイン へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31