jquery.csv2table.js

列 タブ区切り / 行 改行区切り デフォルト

たとえば、エクセルで ファイル->名前を付けて保存->テキスト(タブ区切り) (*.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>


列 タブ区切り / 行 改行区切り デフォルト <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view1').csv2table('./test-utf8.txt');" 
       value  = "$('#view1').csv2table('./test-utf8.txt');"><br>
<p>
<div id="view1"></div>
</p>

<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view2').csv2table('./zisseki-tb.txt');" 
       value  = "$('#view2').csv2table('./zisseki-tb.txt');"><br>
<p>
<div id="view2"></div>
</p>

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

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

<br>=====<br><br>
       
列 カンマ区切り / 行 改行区切り<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view4').csv2table('./test/data/utf8/Book12.csv',{col_sep:','});"
       value  = " $('#view4').csv2table('./test/data/utf8/Book12.csv',{col_sep:','}); "><br>

<p>
<div id="view4"></div>
</p>

列 カンマ区切り / 行 改行区切り <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view5').csv2table('./test/data/utf8/Book12-utf8.csv',{col_sep:','});"
       value  = " $('#view5').csv2table('./test/data/utf8/Book12-utf8.csv',{col_sep:','}); "><br>

<p>
<div id="view5"></div>
</p>


列 カンマ区切り / 行 改行区切り (""のエスケープあり)<br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv',{col_sep:','});"
       value  = " $('#view6').csv2table('./test/data/utf8/Book12-utf8-comm.csv',{col_sep:','}); "><br>


<p>
<div id="view6"></div>
</p>

<br>=====<br><br>
       
列 セミコロン区切り / 行 改行区切り <br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'});" 
       value  = " $('#view7').csv2table('./zisseki-utf8-sc.txt',{col_sep:';'}); "><br> 

<p>
<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           : '\r\n',                 //Separator of rows. default '\n'
  col_sep           : '\t',                   //Separator of cols. default '\t'
  loaded            : function(li,contents){},//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