$('#view4').csv2table('./test/data/utf8/Book12.csv');
$('#view41').csv2table('./test/data/utf8/Book12.csv',{
onload : function(id,op,data,ary){
$('td:nth-child(1)','#'+id).css('background','gold')
}
});
$('#view42').csv2table('./test/data/utf8/Book12.csv',{
onload : function(id,op,data,ary){
$('tr:even','#'+id).css('background','#eee')
}
});
$('#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)
]
})
}
});"
$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv');
$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv');
$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv');
$('#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:';'});
$('#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