jquery.csv2table.js

エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン

Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view3').csv2table('./data/Book12.csv');"
       value="Run">

<div id="view3"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけ !importantを使います )

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<style>
#view31 .csv2table-table-th {
  background-color  : #fff88c !important;
  border-color      : #aaa    !important;
  font-weight       : 100     !important;
}
</style>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view31').csv2table('./data/Book12.csv');"
       value="Run">

<div id="view31"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

setting.use

列 カンマ区切り / 行 改行\r\n区切り + jQchart 




<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<style>
/* label Y  */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}

/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>

<input 
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:100,gap:10}
       });"
       value="use: jqchart:line ">
<input 
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:bar#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:100,gap:10}
       });"
       value="use: jqchart:bar ">


<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>

* setting.title and setting.scaleY were inherited from jQchart.setting.config
名前,3,4,5,6,7,8,9,10,11,12,1,2
理科,30,40,25,45,70,55,80,90,65,95,96,88
社会,12,15,55,30,70,87,55,30,65,76,50,58
算数,60,43,58,22,38,47,35,67,88,53,92,98

setting.sortable

列 カンマ区切り / 行 改行\r\n区切り (sortable : false)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view50').csv2table('./data/Book12-utf8.csv',{
                   sortable : false
                });"
       value="Run">

<div id="view50"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

setting.onload

列 カンマ区切り / 行 改行\r\n区切り (onload : function)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view51').csv2table('./data/Book12-utf8.csv',{
             onload : function(id,op,data,ary){
                           $('#'+id).after('<p>1行目5列目は、'+ary[1][4]+'ですね</p>')
                      } 
                });"
       value="Run">

<div id="view51"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

列 カンマ区切り / 行 改行\r\n区切り (onload後に CSSで色づけ td:nth-child(1) )

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view41').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('td:nth-child(1)','#'+id).css('background','gold')
                      } 
       });" value="Run">

<div id="view41"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

列 カンマ区切り / 行 改行\r\n区切り (onload後に CSSで色づけ tr:even )

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view42').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('tr:even','#'+id).css('background','#eee')
             } 
       });" value="Run">

<div id="view42"></div>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

列 カンマ区切り / 行 改行\r\n区切り (onload後に CSSで色づけ td:odd tr:even )

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view43').csv2table('./data/test.txt',{
             onload : function(id,op,data,ary){
                         $('#'+id)
                           .find('td:odd').css('background','#EFFFBC').end()
                           .find('tr:even').css('background','#FFE0F2')
             } 
       });" value="Run">

<div id="view43"></div>
       
No.,Title,Name,Age,Yen
1,Test1,Toshiro,52,"10000 "
2,Test2,Taro,28,"80000 "
3,Test3,Shiro,12,"5000 "
4,Test4,Gonza,38,"30000"
5,Test5,Itiemon,41,"10000"

列 カンマ区切り / 行 改行\r\n区切り (onload後に CSSで色づけ tr:contains(Safari3)など )

かも日記の読み込み完了時間 ブラウザ別ベンチマークテスト Safari3.1との比較 

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view44').csv2table(
       
        //CSVファイルURL
        './data/bench1.txt',
           
        {
          //CSVファイルをロード後の追加処理
                    //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
          
            $('#'+id)
            
               //IEを含む行の背景色
              .find('tr:contains(IE)').css('background','#EFFFBC').end() 
            
               //Firefoxを含む行の背景色
              .find('tr:contains(Firefox)').css('background','#EFFFeC').end() 
              
               //Safariを含む行の背景色と文字の太さ
              .find('tr:contains(Safari)')
                              .css('background','#FFEaF2')
                              .css('font-weight','900').end() 
          }
        })" value="Run">

<div id="view44"></div>
       
ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422

列 カンマ区切り / 行 改行\r\n区切り (onload後に CSSの新セレクタを追加して4000以下を抽出 )

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<script>
//Add new Selecter value<4000.コンテンツが4000以下の値を抽出するセレクタを作成
jQuery.extend(jQuery.expr[":"], {
  lt4000   : function(a,i,m){ 
    var b = parseFloat(a.textContent||a.innerText||jQuery(a).text()||"");
    return typeof b=='number'? b<4000:false;
  }
});
</script>

<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view45').csv2table(
       
        //CSVファイルURL
        './data/bench1.txt',
           
        {
          //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
          
            $('#'+id)
              
              //3000ミリ秒以下を赤文字
              .find('td:lt4000').css('color','blue').end() 

          }
        })" value="Run">
        
<p>
<div id="view45"></div>
</p>
ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422

setting.select

列 カンマ区切り / 行 改行\r\n区切り (select : '*')

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [0,1,3]
                });"
       value="Run select:[0,1,3]">
<input
       class="btn1"
       type    =  "button"
       onclick="$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [4,2]
                });"
       value="Run select:[4,2]">


<div id="view54"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

setting.orderBy

列 カンマ区切り / 行 改行\r\n区切り (orderBy : [[0,'D']] ) 'D'==DESC 降順 'A'==ASC 昇順 

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[0,'D']]
                });"
       value="Run orderBy : [[0,'D']]"><br>
<input
       class="btn1"
       type    =  "button"
       onclick="$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[1,'A']]
                });"
       value="Run orderBy : [[1,'A']]">
<input
       class="btn1"
       type    =  "button"
       onclick="$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[3,'A']]
                });"
       value="Run orderBy : [[3,'A']]"><br>

<div id="view5"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100000 "
1,タマ,ねこ,"5","80000 "
2,チヤー,いぬ,"12","5000000 "
2,アー,子豚,3,50000
6,イー,イタチ,2,50000
6,ガー,金魚,1,5000
11,ミケ,カメ,1,20000
11,ポチ,トラ,2,10000
11,トム,ライオン,2,2000
11,ココ,インコ,3,80000
11,トト,しゃけ,2,60000

setting.removeDoubleQuote

列 カンマ区切り / 行 改行\r\n区切り (removeDoubleQuote : false 文字囲み""を残す)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view52').csv2table('./data/Book12-utf8.csv',{
                    removeDoubleQuote : false
                });"
       value="Run">

<div id="view52"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

列 カンマ区切り / 行 改行\r\n区切り (データ内に\r\nあり)
test for rfc4180 2-6 Fields containing line breaks (CRLF)

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view61').csv2table('./data/Book12-utf8-rn.csv');"
       value="Run">
<p>
<div id="view61"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さ""る,"10
00","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

列 カンマ区切り / 行 改行\r\n区切り (""のエスケープあり)
test for rfc4180 2-7 escaped double-quotes

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view6').csv2table('./data/Book12-utf8-comm.csv');"
       value="Run">

<div id="view6"></div>
       
ＮＯ,名前,種類,年齢,金額
1,アイ,さ""る,"10""00","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

Delimited by a line break (CRLF).one or more fields, separated by Tab.
列 タブ区切り / 行 改行\r\n区切り デフォルト 

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view1').csv2table('./data/test-utf8.txt',{col_sep:'\t'});"
       value="Run">
       
<div id="view1"></div>
       
受付	成約	名前	金額
20070115	20071225	あいうえお	20000
20070506	20070711	かきくけこ	10000
20080123	20080211	さしすせそ	15000
20050325	20050530	たちつてと	2000
20080525	20080606	なにぬねの	50000


<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view2').csv2table('./data/zisseki-tb.txt',{col_sep:'\t'});"
       value="Run">

<div id="view2"></div>
       
年月日	納期	内容	希望価格	価格	メモ
20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ
20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ
20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ
20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした
20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ
20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ
20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ
20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ

列 タブ区切り / 行 ; 区切り 

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view32').csv2table('./data/zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});"
       value="Run">

<div id="view32"></div>
       
年月日	納期	内容	希望価格	価格	メモ;20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ;20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ;20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ;20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした;20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ;20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ;20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ;20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ;

Delimited by a line break (CRLF).one or more fields, separated by Semicolon.
列 セミコロン区切り / 行 改行\r\n区切り 

<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery..js" type="text/javascript" charset="utf-8"></script>

<input
       class="btn1"
       type    =  "button"
       onclick="$('#view7').csv2table('./data/zisseki-utf8-sc.txt',{col_sep:';'});" 
       value="Run">

<div id="view7"></div>
       
年月日;納期;内容;希望価格;価格;メモ
20080216;20080217;GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。;1500;1500;GoogleMaps+カスタマイズ
20080216;20080217;「ユーザーの声を見る」みたいに「ふわっ～と」文字を表示させたい。;1500;1500;jQuery+カスタマイズ
20080210;20080210;Ajaxなツリーメニューを作りたい;3000;3000;YUI+カスタマイズ
20080201;20080201;腕立て伏せ198回;5000;0;出来ませんでした
20080129;20080130;エクセル内の指定した場所のデータをグラフ化したい。;2000;2000;jQchart+カスタマイズ
20080127;20080127;WebサーバのCSVデータをブラウザへスプレッドシート表示など;2000;2000;カスタマイズ
20080126;20080127;CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など;3000;3000;jQchart+カスタマイズ
20080124;20080125;イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい;2000;3000;jQchart+カスタマイズ

たとえば、エクセルで ファイル->名前を付けて保存->テキスト(タブ区切り) (*.txt)などで保存すると、ファイル名指定だけでそのまま読み込めます。 p.s.エクセルのユニコード保存だとutf-16リトルエンディアンになるのですが、どうも文字化け的にあまり芳しくないので、少し面倒でもメモ帳などでutf-8へ変換して使うことをお勧めします。

書式 jQuery(セレクタ).csv2table(CSVファイルURL,option); option

    op = $.csv2table.setting[id] = $.extend({
      url                : url,
      nowloadingImg      : $.csv2table.loadImg,              //Image of now loading...
      nowloadingMsg      : 'now loading...',                 //Massege of  now loading...
      removeDoubleQuote  : true,                             // remove " of "hogehoge"
      col_midasi         : '0',                              //
      row_sep            : '\n',                             //Separator of rows. default '\n'
      col_sep            : ',',                              //Separator(,|\t|;) of cols. default ','
      sortable           : true,                             //col sort
      select             : '*',                              //select col lists. default '*' is all cols.
      orderBy            : null,                             //array of sort col. orderBy[[0,"A"]]
      col0color          : true,                             //col[0] color sync jQchart line_strokeStyle
      onload             : null,                             //collback function (id,op,data,ary) {}
      use                : null,                             // 'jqchart:line#canvasID'
      className_div      : 'csv2table-div',                  //className 
      className_table    : 'csv2table-table',                //className 
      className_table_th : 'csv2table-table-th',             //className 
      className_table_td : 'csv2table-table-td',             //className 
      className_sortMark : 'csv2table-sortMark'              //className
    },setting);
画像 csv2tableを実行前に次のように指定することで、好きなソート用画像とnow loading画像を使えます。 
  $.extend($.csv2table,{
    loadImg  : 'http://jsgt.org/mt/01/icon-loadinfo.gif', //Image of now loading...
    sortDImg : 'http://jsgt.org/mt/01/icon-d.gif',        //降順画像
    sortAImg : 'http://jsgt.org/mt/01/icon-a.gif'         //昇順画像
  })

|++かも日記 | v002 test | jQuery › Downloads › Plugins › csv2table | › jQchart |