2008.3.1 csv2table v0.02 was released.
Enjoy version 0.02 ! v0.02 Samples
( 新しいバージョンv0.02のサンプルはこちら→v0.02 Samples )

jquery.csv2table.js

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


Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り
$('#view4').csv2table('./test/data/utf8/Book12.csv');


列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけ td:nth-child(1) )
$('#view41').csv2table('./test/data/utf8/Book12.csv',{
             onload  : function(id,op,data,ary){
                         $('td:nth-child(1)','#'+id).css('background','gold')
                       }
       });


列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけ tr:even )
$('#view42').csv2table('./test/data/utf8/Book12.csv',{
             onload  : function(id,op,data,ary){
                         $('tr:even','#'+id).css('background','#eee')
                       }
       });


列 カンマ区切り / 行 改行\r\n区切り + jQchartv jquery.jqchart0.02-beta-1.7.js
$('#view40').csv2table('./test/data/utf8/Book4chart.csv',{
         onload  : function (id,op,data,ary){
         
            var head= ary[0],dataBody=ary.slice(1) ;
            $('#canvasMyID').jQchart({
            	config : { 
            		title  : 'This HTML is setting.config.<b>title</b>',
            		labelX : head.slice(1),
            		scaleY : {min: 0,max:100,gap:10},
            		width    : $('#'+id+' table').width()+10,
            		paddingL : $('#'+id+' table th:nth-child(1)').width()+14,
            		xGapPaddingL: 0
            	},
            	data : [
            		dataBody[0].slice(1),
            		dataBody[1].slice(1),
            		dataBody[2].slice(1) 
            	]
            })
            
         }
       });"


列 カンマ区切り / 行 改行\r\n区切り
$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv');


列 カンマ区切り / 行 改行\r\n区切り (\r\nあり)
test for rfc4180 2-6 Fields containing line breaks (CRLF)
$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv');


列 カンマ区切り / 行 改行\r\n区切り (""のエスケープあり)
test for rfc4180 2-7 escaped double-quotes
$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv');


Delimited by a line break (CRLF).one or more fields, separated by Tab.
列 タブ区切り / 行 改行\r\n区切り デフォルト
$('#view1').csv2table('./test-utf8.txt',{col_sep:'\t'});


$('#view2').csv2table('./zisseki-tb.txt',{col_sep:'\t'});


列 タブ区切り / 行 ; 区切り
$('#view3').csv2table('./zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});


Delimited by a line break (CRLF).one or more fields, separated by Semicolon.
列 セミコロン区切り / 行 改行\r\n区切り
$('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'});

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


<script src="http://jsgt.org/lib/jquery/1.2.3/jquery-1.2.3.js" 
        type="text/javascript"></script>
<script src="./jquery.csv2table.js" 
        type="text/javascript" charset="utf-8"></script>

<p><hr size="10">
Delimited by a line break (CRLF).one or more  fields, separated by commas.<br>
列 カンマ区切り / 行 改行\r\n区切り<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view4').csv2table('./test/data/utf8/Book12.csv');"
       value="Run">
       
<div id="view4"></div>
</p>


<p><hr>
列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけ td:nth-child(1) )<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view41').csv2table('./test/data/utf8/Book12.csv',{
             col_sep : ',',
             onload  : function(id,op,data,ary){
                         $('td:nth-child(1)','#'+id).css('background','gold')
                       }
       });" value="Run">
       
<div id="view41"></div>
</p>



<p><hr>

列 カンマ区切り / 行 改行\r\n区切り (CSSで色づけ tr:even )<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view42').csv2table('./test/data/utf8/Book12.csv',{
             col_sep : ',',
             onload  : function(id,op,data,ary){
                         $('tr:even','#'+id).css('background','#eee')
                       }
       });" value="Run">
       
<div id="view42"></div>
</p>


<p><hr>
列 カンマ区切り / 行 改行\r\n区切り + <a href="http://plugins.jquery.com/project/jQchart">jQchart</a> <br>

<!-- add for jQchart -->
<!--[if IE]>
<script src="./excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./jquery.jqchart0.02-beta-1.7.js" type="text/javascript" charset="utf-8"></script>

<style>
/* ラベル Y軸 */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}
/* ラベル X軸 */
.jQchart-labelX-canvasMyID{
	font-size : 12px;
}
/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>


<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view40').csv2table('./test/data/utf8/Book4chart.csv',{
         col_sep : ',',
         onload  : function (id,op,data,ary){
            var head= ary[0],dataBody=ary.slice(1) ;
            $('#canvasMyID').jQchart({
            	config : { 
            		title    : 'This HTML is setting.config.<b>title</b>',
            		labelX   : head.slice(1),
            		scaleY   : {min: 0,max:100,gap:10},
            		width    : $('#'+id+' table').width()+10,
            		paddingL : $('#'+id+' table th:nth-child(1)').width()+14,
            		xGapPaddingL: 0
            	},
            	data : [
            		dataBody[0].slice(1),
            		dataBody[1].slice(1),
            		dataBody[2].slice(1)
            	]
            })
            
         }
       });"
       value="Run">
       
<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>
</p>


<p><hr>
列 カンマ区切り / 行 改行\r\n区切り <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv');"
       value="Run">
       
<div id="view5"></div>
</p>

<p><hr>
列 カンマ区切り / 行 改行\r\n区切り (\r\nあり)<br>
test for <a href="http://www.ietf.org/rfc/rfc4180.txt">rfc4180</a> 2-6 Fields containing line breaks (CRLF)<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv');"
       value="Run">
       
<div id="view61"></div>
</p>

<p><hr>
列 カンマ区切り / 行 改行\r\n区切り (""のエスケープあり)<br>
test for <a href="http://www.ietf.org/rfc/rfc4180.txt">rfc4180</a> 2-7 escaped double-quotes<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv');"
       value="Run">
       
<div id="view6"></div>
</p>

<p><hr size="10">
Delimited by a line break (CRLF).one or more  fields, separated by Tab.<br>
列 タブ区切り / 行 改行\r\n区切り デフォルト <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view1').csv2table('./test-utf8.txt',{col_sep:'\t'});"
       value="Run">
       
<div id="view1"></div>
<br>
<br>

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


<p><hr>
列 タブ区切り / 行 ; 区切り <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view3').csv2table('./zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});"
       value="Run">
       
<div id="view3"></div>
</p>

<p><hr size="10">
Delimited by a line break (CRLF).one or more  fields, separated by Semicolon.<br>
列 セミコロン区切り / 行 改行\r\n区切り <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'});" 
       value="Run">
       
<div id="view7"></div>
</p>

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

option

	nowloadingImg      : $.csv2table.loadImg,       //Image of now loading...
	nowloadingMsg      : 'now loading...',          //Massege of  now loading...
	removeDoubleQuote  : true,                      // remove " of "hogehoge"
	row_sep            : '\n',                      //Separator of rows. default '\n'
	col_sep            :  ',',                      //Separator(,|\t|;) of cols. default ',' *changed at:csv2table0.01-beta-7.js
	loaded             : function(id,op,data,ary){},//collback event
	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

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