$('#view1').csv2table('./test-utf8.txt');
$('#view2').csv2table('./zisseki-tb.txt');
$('#view3').csv2table('./zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});
$('#view4').csv2table('./test/data/utf8/Book12.csv',{col_sep:','});
$('#view41').csv2table('./test/data/utf8/Book12.csv',{
col_sep : ',',
onload : function(contents,op,data){
$('td:nth-child(1)',contents).css('background','gold')
}
});
$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv',{col_sep:','});
$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv',{col_sep:','});
$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv',{col_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>
列 タブ区切り / 行 改行区切り デフォルト <br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view1').csv2table('./test-utf8.txt');"
value="Run">
<pre>$('#view1').csv2table('./test-utf8.txt');</pre>
<div id="view1"></div>
<br>
<br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view2').csv2table('./zisseki-tb.txt');"
value="Run">
<pre>$('#view2').csv2table('./zisseki-tb.txt');</pre>
<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">
<pre>$('#view3').csv2table('./zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});</pre>
<div id="view3"></div>
</p>
<br>=====<br><br>
<p><hr>
列 カンマ区切り / 行 改行区切り<br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view4').csv2table('./test/data/utf8/Book12.csv',{col_sep:','});"
value="Run">
<pre>$('#view4').csv2table('./test/data/utf8/Book12.csv',{col_sep:','});</pre>
<div id="view4"></div>
</p>
<p><hr>
列 カンマ区切り / 行 改行区切り (CSSで色づけ td:nth-child(1) )<br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view41').csv2table('./test/data/utf8/Book12.csv',{
col_sep : ',',
onload : function(contents,op,data){
$('td:nth-child(1)',contents).css('background','gold')
}
});" value="Run">
<pre>$('#view41').csv2table('./test/data/utf8/Book12.csv',{
col_sep : ',',
onload : function(contents,op,data){
$('td:nth-child(1)',contents).css('background','gold')
}
});</pre>
<div id="view41"></div>
</p>
<p><hr>
列 カンマ区切り / 行 改行区切り <br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv',{col_sep:','});"
value="Run">
<pre>$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv',{col_sep:','});</pre>
<div id="view5"></div>
</p>
<p><hr>
列 カンマ区切り / 行 改行区切り (\r\nあり)<br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv',{col_sep:','});"
value="Run">
<pre>$('#view61').csv2table('./test/data/utf8/Book12-utf8-rn.csv',{col_sep:','});</pre>
<div id="view61"></div>
</p>
<p><hr>
列 カンマ区切り / 行 改行区切り (""のエスケープあり)<br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv',{col_sep:','});"
value="Run">
<pre>$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv',{col_sep:','});</pre>
<div id="view6"></div>
</p>
<br>=====<br><br>
<p><hr>
列 セミコロン区切り / 行 改行区切り <br>
<input disabled
class="btn1"
type = "button"
onclick="$('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'});"
value="Run">
<pre>$('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'});</pre>
<div id="view7"></div>
</p>
参考::(下記は無くても動作します。CSSで表のデザインを変えたいときに使います)
<style type="text/css">
.className-div {
/*background:green !important <--!importantを使用して上書きします*/
}
.csv2table-table {
/*background:green !important*/
}
.csv2table-table-th {
/*background:green !important*/
}
.csv2table-table-td {
/*background:green !important*/
}
</style>
書式 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 : '\t', //Separator of cols. default '\t'
loaded : function(contents,op,data){},//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