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>


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

<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#tableViewer').csv2table('./zisseki-tb.txt');" 
       value  = "$('#tableViewer').csv2table('./zisseki-tb.txt');"><br>
<input disabled
       class="btn1"
       type    =  "button"
       onclick="$('#tableViewer').csv2table('./test-utf8.txt');" 
       value  = "$('#tableViewer').csv2table('./test-utf8.txt');"><br>

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

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

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


参考::(下記は無くても動作します。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