|Blog | Demo | Wassr | jQuery › Downloads › Plugins › csv2table | ( › jQchart )

jquery.csv2table.js/ themeroller TEST

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

Note : IE6ではソートアイコンが変ですが透過pngは、ThemeRoller側が対応するらしいので、その実装待ち。

Get ThemeRoller CSS files.

Contents

画像クリックでテーマが変わります。

cre .css
cre .css
cre .css
cre .css
cre .css
cre .css
cre .css
cre .css
cre .css
cre .css

ui.theme.css to Table with csv2table.js テーマのstyle設定を確かめる


Basic-1 Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り


<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<div id="view0"></div>
<script>
$(function(){
  $('#view0').csv2table('./data/Book12.csv');
});
</script>


Basic-2 click and load Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view8').csv2table('./data/Book12.csv');"
       value="Run">

<div id="view8"></div>
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "


Basic-3 CSV from PHP Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view88').csv2table('http://jsgt.org/lib/jquery/plugin/csv2table/v002/data/getcsv.php');"
       value="Run ( at online )">

<div id="view88"></div>
<?php

$csvdata = 'NO,名前,種類,年齢,金額
1,アイ,Monkey,10,"10,000"
2,タマ,Cat,5,"80,000"
3,チャー,Dog,12,"500,000"
4,アー,Pig,3,"50,000"
5,イー,Weasel,2,"50,000"';
  
  //HTMLエンティティ(このサンプルではあまり関係ありませんが一応)
  $csvdata = htmlspecialchars($csvdata,ENT_NOQUOTES,"UTF-8");

  //出力をUTF-8に設定
  mb_http_output ( 'UTF-8' );
  
  //出力
  echo ($csvdata);

?>


Basic-4 Inline CSV from arguments[0] Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var data881='\
NO,名前,種類,年齢,金額\r\n\
1,アイ,Monkey,10,"10,000"\r\n\
2,タマ,Cat,5,"80,000"\r\n\
3,チャー,Dog,12,"500,000"\r\n\
4,アー,Pig,3,"50,000"\r\n\
';

</script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view881').csv2table(data881,{
         isInline : true
       });"
       value="Run">

<div id="view881"></div>

Delimited by a tab (\t).one or more fields, separated by a semicolon(;).
列 タブ区切り / 行 ; 区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

var data882='\
NO	名前	種類	年齢	金額;\
1	アイ	Monkey	10	"10,000";\
2	タマ	Cat	5	"80,000";\
3	チャー	Dog	12	"500,000";\
4	アー	Pig	3	"50,000";\
';

</script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view882').csv2table(data882,{
         col_sep  : '\t',
         row_sep  : ';',
         isInline : true
       });"
       value="Run">

<div id="view882"></div>

*上記CSVの行末にバックスラッシュ(円記号)「\」を書いたのは単にJavaScript的整形のためで必須ではありません。CSVとしての列,行セパレータさえあればOK。


setting.use ( use jQchart ) 列 カンマ区切り / 行 改行\r\n区切り + jQchart




<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.jqchart-.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<style>
/* label Y  */
.jQchart-labelY-canvasMyID{
	font-size : 12px;
}

/* label Data */
.jQchart-labelData-canvasMyID{
	font-size : 10px;
}
</style>

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:120,gap:10}
       });"
       value="use: jqchart:line ">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view40').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:bar#canvasMyID',
         title    : 'This HTML is setting.config.<b>title</b>',
         scaleY   : {min: 0,max:120,gap:10}
       });"
       value="use: jqchart:bar ">


<canvas id="canvasMyID" height="200"></canvas>
<div id="view40"></div>

* setting.title and setting.scaleY were inherited from jQchart.setting.config
名前,3,4,5,6,7,8,9,10,11,12,1,2
理科,30,40,25,45,70,55,80,90,65,95,96,88
社会,12,15,55,30,70,87,55,30,65,76,50,58
算数,60,43,58,22,38,47,35,67,88,53,92,98


setting.sortable (sortable : false) 列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view50').csv2table('./data/Book12-utf8.csv',{
                   sortable : false
                });"
       value="Run">

<div id="view50"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "


setting.onload (onload : function) 列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view51').csv2table('./data/Book12-utf8.csv',{
             onload : function(id,op,data,ary){
                           $('#'+id).after('<p>1行目5列目は、'+ary[1][4]+'ですね</p>')
                      } 
                });"
       value="Run">

<div id="view51"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "


onload後に 塗りわけ関数classifyByCol @see Function classifyByCol samples

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#classifyTest').csv2table('./data/classify.csv',{
                    onload : function(id,op,data,ary){ 
                       $.csv2table.f.classifyByCol(
                         id,3,[
                           ['>1','#D0FFE0'],
                           ['>3','#98D9FF'],
                           ['>5','#8CA9FF']
                         ]
                       )
                    }
                });"
       value="classifyByCol">

<div id="view542"></div>
       
NO,Name,Kinds,Age,Yen
1,AI,Monkey,10,"100,000"
2,Tama,Cat,5,"80,000"
3,Char,Dog,12,"5,000,000"
4,AA,Pig,3,"50,000"
5,Ii,Weasel,2,"50,000"
6,Gar,Goldfish,1,"5,000"
7,Mike,Tortoise,5,"20,000"
8,Pochi,Tiger,2,"10,000"
9,Tom,Lion,2,"2,000"
10,Mary,Dog,5,"80,000"
11,ToTo,Salmon,2,"60,000"
12,Ponta,Racoon,2,"60,000"


onload後に CSSで色づけ td:nth-child(1)列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view41').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('td:nth-child(1)','#'+id).css('background','gold')
                      } 
       });" value="Run">

<div id="view41"></div>
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "


onload後に CSSで色づけ tr:even 列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view42').csv2table('./data/Book12.csv',{
             onload : function(id,op,data,ary){
                         $('tr:even','#'+id).css('background','#ddd')
             } 
       });" value="Run">

<div id="view42"></div>
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "


onload後に CSSで色づけ td:odd tr:even 列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view43').csv2table('./data/test.txt',{
             onload : function(id,op,data,ary){
                         $('#'+id)
                           .find('td:odd').css('background','#EFFFBC').end()
                           .find('tr:even').css('background','#FFE0F2')
             } 
       });" value="Run">

<div id="view43"></div>
       
No.,Title,Name,Age,Yen
1,Test1,Toshiro,52,"10000 "
2,Test2,Taro,28,"80000 "
3,Test3,Shiro,12,"5000 "
4,Test4,Gonza,38,"30000"
5,Test5,Itiemon,41,"10000"


onload後に CSSで色づけ tr:contains(hogehoge)など 列 カンマ区切り / 行 改行\r\n区切り

かも日記の読み込み完了時間 ブラウザ別ベンチマークテスト Safari3.1との比較

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view44').csv2table(
       
        //CSVファイルURL
        './data/bench1.txt',
           
        {
          //CSVファイルをロード後の追加処理
                    //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
          
            $('#'+id)
            
               //IEを含む行の背景色
              .find('tr:contains(IE)').css('background','#EFFFBC').end() 
            
               //Firefoxを含む行の背景色
              .find('tr:contains(Firefox)').css('background','#EFFFeC').end() 
              
               //Safariを含む行の背景色と文字の太さ
              .find('tr:contains(Safari)')
                              .css('background','#FFEaF2')
                              .css('font-weight','900').end() 
          }
        })" value="Run">

<div id="view44"></div>
       
ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422


onload後に カスタムセレクタセレクタで4000以下を抽出 列 カンマ区切り / 行 改行\r\n区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<script>
//Add new Selecter value<4000.コンテンツが4000以下の値を抽出するセレクタを作成
jQuery.extend(jQuery.expr[":"], {
  lt4000   : function(a,i,m){ 
    var b = parseFloat(a.textContent||a.innerText||jQuery(a).text()||"");
    return typeof b=='number'? b<4000:false;
  }
});
</script>

<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view45').csv2table(
       
        //CSVファイルURL
        './data/bench1.txt',
           
        {
          //CSVファイルをロード後の追加処理
          onload  : function(id,op,data,ary){
          
            $('#'+id)
              
              //3000ミリ秒以下を赤文字
              .find('td:lt4000').css('color','blue').end() 

          }
        })" value="Run">
        
<p>
<div id="view45"></div>
</p>
ブラウザ,1回目,2回目,3回目,4回目,5回目
IE6,7672,9562,10140,13141,14578
Safari3.1,13812,4235,2516,3625,3406
Firefox2,7625,10000,10438,10156,7438
Firefox3b4,4288,3851,3519,3220,3227
Opera9.5b,4515,3593,4703,3437,3422


onload後に ビルトインセレクタ_csv2table_myCompで塗り分け+jQchart :_csv2table_myComp(条件)
<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<script src="./js/excanvas/excanvas-compressed.js" type="text/javascript" ></script>
<![endif]-->
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.jqchart-.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<style>
/* label Y  */
.jQchart-labelY-canvasMyID2{
	font-size : 12px;
}

/* label Data */
.jQchart-labelData-canvasMyID2{
	font-size : 10px;
}
</style>

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view453').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID2',
         title    : 'This HTML is setting.config.title',
         scaleY   : {min: 0,max:120,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:line ">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view453').csv2table('./data/Book4chart2.csv',{
         use      : 'jqchart:bar#canvasMyID2',
         title    : 'This HTML is setting.config.title',
         scaleY   : {min: 0,max:150,gap:10},
         onload:function(){
           chkComp();
         },
         sortable : false
       });"
       value="use: jqchart:bar ">

<canvas id="canvasMyID2" height="200"></canvas>
<div id="view453"></div>

<script type="text/javascript">
function chkComp(){
 jQuery('table','#view453')
  .find('td:_csv2table_myComp(<=30)').css('background','#f00').end()
  .find('td:_csv2table_myComp(>30)').css('background','#f40').end()
  .find('td:_csv2table_myComp(>50)').css('background','#f60').end()
  .find('td:_csv2table_myComp(>60)').css('background','#f80').end()
  .find('td:_csv2table_myComp(>80)').css('background','#fa0').end()
  .find('td:_csv2table_myComp(>100)').css('background','#fd0').end()
  .find('td:_csv2table_myComp(>150)').css('background','#ff0').end()
} ;

</script>


onload後に ビルトインセレクタ_csv2table_hoboNumで数値セル検索 td:_csv2table_hoboNumで検索し 数値(3桁カンマ値含む)の色をオレンジに変えてみる

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view454').csv2table('./data/Book12-utf8.csv',{
         onload:function(id,op,data,ary){ 
           $('#'+id)
             .find('td:_csv2table_hoboNum')
             .css('color','orange')
         }
       });"
       value="_csv2table_hoboNum">

<div id="view454"></div>
NO,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"


setting.select 列の選択
SELECT
例 select : [ 列番号 , 列番号 ,列番号 , ...n ]
[]記号の意味は省略可ではなくJavaScript配列。列番号は、表示したい列のindex番号で0から始まる連番。型はNumber。

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [0,1,3]
                });"
       value="Run select:[0,1,3]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view54').csv2table('./data/Book12-utf8.csv',{
                    select : [4,2]
                });"
       value="Run select:[4,2]">


<div id="view54"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"


setting.where 行の絞込み @see setting.where samples

WHERE
例1 where : [ { '列名' : '条件' } , '&&' , { '列名' : '条件' } , ...n ]
例2 where : [ [ 列番号 , '条件' ] , '&&' , [ 列番号 , '条件' ] , ...n ]
[]記号の意味は省略可ではなくJavaScript配列。列番号は0から始まる連番。'列名'はStringで与えるためクオート('か")で囲み、列番号はNumberであり囲まない。

数値
列名で指定する
列番号(0からはじまる連番)でも指定できます (*配列で記述します)

複数条件 ('&&'がAND '||'がOR)

like パーセント記号 (%でワイルドカード あいまい検索)

like アンダスコア記号 (_で1 つの文字と一致)

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<hr>数値<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'年齢':'==5'}]
                });"
       value="where : [{'年齢':'==5'}]"> <span style='font-size:0.8em'>列名で指定する</span><br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [[3,'<=2']]
                });"
       value="where : [[3,'<=2']]"> <span style='font-size:0.8em'>
 列番号(0からはじまる連番)でも指定できます 
(*配列で記述します)</span><br>

<hr>複数条件 ('&&'がAND '||'がOR)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'NO':'<5'},'&&',{'年齢':'>=10'}]
                });"
       value="where : [{'NO':'<5'},'&&',{'年齢':'>=10'}]">
<hr>like パーセント記号 (%でワイルドカード あいまい検索)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'種類':'like イタ%'}]
                });"
       value="where : [{'種類':'like イタ%'}]">
<hr>like アンダスコア記号 (_で1 つの文字と一致)<br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view541').csv2table('./data/where1.csv',{
                    where : [{'種類':'like タ__'}]
                });"
       value="where : [{'種類':'like タ__'}]">
<p>
<div id="view541"></div>


<div id="view54"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000"
2,タマ,ねこ,5,"80,000"
3,チャー,いぬ,12,"5,000,000"
4,アー,子豚,3,"50,000"
5,イー,イタチ,2,"50,000"
6,ガー,金魚3%だ,1,"5,000"
7,ミケ,カメ,5,"20,000"
8,ポチ,_ト_ラ_,2,"10,000"
9,トム,ライオン,2,"2,000"
10,メリー,いぬ,5,"80,000"
11,トト,しゃけ,2,"60,000"
12,ポンタ,タヌキ,2,"60,000"
13,ビィ,金魚300%なのだ,3,"50,000"
14,ポー,ハト_ラバ,8,"10,000"


setting.orderBy 並べ替え @see setting.orderBy samples

ORDERBY
例1 orderBy : [ [ '列名' ] , [ '列名' ] , ...n ]
例2 orderBy : [ [ 列番号 ] , [ 列番号 ] , ...n ]
例3 orderBy : [ [ '列名' , 'sortType' ] , [ '列名' , 'sortType' ] , ...n ]
例4 orderBy : [ [ 列番号 , 'sortType' ] , [ 列番号 , 'sortType' ] , ...n ]

[]記号の意味は省略可ではなくJavaScript配列。sortType は、'D'==DESC 降順 'A'==ASC 昇順 。sortType省略可。省略時はASC 昇順。列番号は0から始まる連番。'列名'はStringで与えるためクオート('か")で囲み、列番号はNumberであり囲まない。




where + orderBy


select + where + orderBy

(*where,orderByのindexは select後の連番で記述します)

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[0]]
                });"
       value="orderBy : [[0]]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [[0,'D']]
                });"
       value="orderBy : [[0,'D']]"><br>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['年齢','A']]
                });"
       value="orderBy : [['年齢','A']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['年齢','A'],['金額','D']]
                });"
       value="orderBy : [['年齢','A'],['金額','D']]"><br>

where + orderBy
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    where : [{'金額':'>=50000'}],
                    orderBy : [[4,'D']]
                });"
       value="where : [{'金額':'>=50000'}] , orderBy : [[4,'D']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    where : [[3,'<=5']],
                    orderBy : [['名前','A']]
                });"
       value="where : [[3,'<=5']], orderBy : [['名前','A']]">
<br>
select + where + orderBy
<span style='font-size:0.8em'>(*where,orderByのindexは select後の連番で記述します)</span>
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    select : [1,2,3,4],
                    where : [{'年齢':'==2'}],
                    orderBy : [[3,'A']]
                });"
       value="select:[1,2,3,4],where : [{'年齢':'==2'}] , orderBy : [[3,'A']]">
<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view5').csv2table('./data/Book12-4sort.csv',{
                    select : [1,2,3,4],
                    where : [[2,'<=3']],
                    orderBy : [['金額','D']]
                });"
       value="select:1,2,3,4],where : [[2,'<=3']] , orderBy :[['金額','D']]">


<div id="view5"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10",100000
2,タマ,ねこ,"5",80000
3,チヤー,いぬ,"12",5000000
4,アー,子豚,3,50000
5,イー,イタチ,2,50000
6,ガー,金魚,1,5000
7,ミケ,カメ,1,20000
8,ポチ,トラ,2,10000
9,トム,ライオン,2,2000
10,ココ,インコ,3,80000
11,トト,しゃけ,2,60000


setting.limit 行数制限

LIMIT
例1 limit : [ rowCount ]
例2 limit : [ offset,rowCount ]

[]記号の意味は省略可ではなくJavaScript配列。引数が 1 つの場合、その値は、rowCountで冒頭からの行数を表す。 引数が 2 つの場合、第一引数はoffsetで、最初のレコードまでのオフセットを表し、2 つ目の引数は、rowCountで最大レコード数を表す。最初のレコードのオフセット値は 0(1 ではない)。 もし、limitがnull、あるいは、rowCountが最大レコード数より大きければ、最大レコード数。offset、rowCountともにNumber。


<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3]
                });"
       value="limit : [3]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0,5]
                });"
       value="limit : [0,5]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3,15]
                });"
       value="limit : [3,15]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['金額','D']],
                    limit   : [3]
                });"
       value="orderBy : [['金額','D']],limit : [3]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    where : [{'年齢':'>=3'}],
                    orderBy : [['年齢','D']],
                    limit   : [5]
                });"
       value="where : [{'年齢':'>=3'}],orderBy : [['年齢','D']],limit : [5]">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv');"
       value="limitなし">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : null
                });"
       value="limit : null">
<input disabled
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0]
                });"
       value="limit : [0]">

<div id="view543"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10",100000
2,タマ,ねこ,"5",80000
3,チヤー,いぬ,"12",5000000
4,アー,子豚,3,50000
5,イー,イタチ,2,50000
6,ガー,金魚,1,5000
7,ミケ,カメ,1,20000
8,ポチ,トラ,2,10000
9,トム,ライオン,2,2000
10,ココ,インコ,3,80000
11,トト,しゃけ,2,60000


setting.removeDoubleQuote 列 カンマ区切り / 行 改行\r\n区切り (removeDoubleQuote : false 文字囲み""を残す)

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view52').csv2table('./data/Book12-utf8.csv',{
                    removeDoubleQuote : false
                });"
       value="Run">

<div id="view52"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"


列 カンマ区切り / 行 改行\r\n区切り (データ内に\r\nあり) rfc4180 2-6 test for rfc4180 2-6 Fields containing line breaks (CRLF)

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view61').csv2table('./data/Book12-utf8-rn.csv');"
       value="Run">
<p>
<div id="view61"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さ""る,"10
00","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"


列 カンマ区切り / 行 改行\r\n区切り (""のエスケープあり) rfc4180 2-7 test for rfc4180 2-7 escaped double-quotes

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view6').csv2table('./data/Book12-utf8-comm.csv');"
       value="Run">

<div id="view6"></div>
       
NO,名前,種類,年齢,金額
1,アイ,さ""る,"10""00","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"


列 タブ区切り / 行 改行\r\n区切り Delimited by a line break (CRLF).one or more fields, separated by Tab.

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view1').csv2table('./data/test-utf8.txt',{col_sep:'\t'});"
       value="Run">
       
<div id="view1"></div>
       
受付	成約	名前	金額
20070115	20071225	あいうえお	20000
20070506	20070711	かきくけこ	10000
20080123	20080211	さしすせそ	15000
20050325	20050530	たちつてと	2000
20080525	20080606	なにぬねの	50000


<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

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

<div id="view2"></div>
       
年月日	納期	内容	希望価格	価格	メモ
20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ
20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ~と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ
20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ
20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした
20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ
20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ
20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ
20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ


列 タブ区切り / 行 ; 区切り

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view32').csv2table('./data/zisseki-utf8-tb-sc.txt',{col_sep:'\t',row_sep:';'});"
       value="Run">

<div id="view32"></div>
       
年月日	納期	内容	希望価格	価格	メモ;20080216	20080217	GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。	1500	1500	GoogleMaps+カスタマイズ;20080216	20080217	「ユーザーの声を見る」みたいに「ふわっ~と」文字を表示させたい。	1500	1500	jQuery+カスタマイズ;20080210	20080210	Ajaxなツリーメニューを作りたい	3000	3000	YUI+カスタマイズ;20080201	20080201	腕立て伏せ198回	5000	0	出来ませんでした;20080129	20080130	エクセル内の指定した場所のデータをグラフ化したい。	2000	2000	jQchart+カスタマイズ;20080127	20080127	WebサーバのCSVデータをブラウザへスプレッドシート表示など	2000	2000	カスタマイズ;20080126	20080127	CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など	3000	3000	jQchart+カスタマイズ;20080124	20080125	イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい	2000	3000	jQchart+カスタマイズ;


列 セミコロン区切り / 行 改行\r\n区切りDelimited by a line break (CRLF).one or more fields, separated by Semicolon.

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view7').csv2table('./data/zisseki-utf8-sc.txt',{col_sep:';'});" 
       value="Run">

<div id="view7"></div>
       
年月日;納期;内容;希望価格;価格;メモ
20080216;20080217;GoogelMapで地図を表示させ「マーカーボタン」クリックでマーカー表示、更にマーカークリックで吹き出しが現れる。;1500;1500;GoogleMaps+カスタマイズ
20080216;20080217;「ユーザーの声を見る」みたいに「ふわっ~と」文字を表示させたい。;1500;1500;jQuery+カスタマイズ
20080210;20080210;Ajaxなツリーメニューを作りたい;3000;3000;YUI+カスタマイズ
20080201;20080201;腕立て伏せ198回;5000;0;出来ませんでした
20080129;20080130;エクセル内の指定した場所のデータをグラフ化したい。;2000;2000;jQchart+カスタマイズ
20080127;20080127;WebサーバのCSVデータをブラウザへスプレッドシート表示など;2000;2000;カスタマイズ
20080126;20080127;CSV複数データによる複数折れ線グラフ(別サーバーからのデータインポート)など;3000;3000;jQchart+カスタマイズ
20080124;20080125;イントラネットのWebサーバに置かれたCSVファイルを読み込み、ブラウザで折れ線グラフを表示したい;2000;3000;jQchart+カスタマイズ


set CSS with stylesheet (#id名 .csv2table-table-td)Delimited by a line break (CRLF).one or more fields, separated by commas.
列 カンマ区切り / 行 改行\r\n区切り ( 非推奨 Non-recommendation / CSSで色づけは、 テーマローラー側で指定した方が統一しやすいと思うので、あまりお勧めしません。行うなら上記のonload後、クロスブラウザなjQueryのCSSメソッドを使うのが安全。)
*テーマ(ui.theme.css)を使うと背景画像が設定されるので、単純なCSS指定だけでは背景色はブラウザによって見えなかったりします。

<link href="./tm/jquery-ui-themeroller/ui.theme.css" rel="stylesheet" type="text/css">  
<script src="./js/jquery-.min.js" type="text/javascript"></script>
<script src="./js/jquery.-.js" type="text/javascript" charset="utf-8"></script>

<style>
#view31 .csv2table-table-td {
  background-color  : #fff88c !important;
  border-color      : orange  !important;
  font-weight       : 900     !important;
}
</style>

<input
       class   = "btn1"
       type    = "button"
       onclick = "$('#view31').csv2table('./data/Book12.csv');"
       value="Run">

<div id="view31"></div>
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

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


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

    op = $.csv2table.setting[id] = $.extend({
    
      url                : url,                   //URL of CSV file or PHP,Perl,etc... to generate CSV.
      isInline           : false,                 //If true,argument[0] is CSV data. It is not a url.
      nowloadingImg      : $.csv2table.loadImg,   //Image of now loading...
      nowloadingMsg      : 'now loading...',      //Massege of  now loading...
      onload             : null,                  //collback function (id,op,data,ary) {}
      appendThead        : null,                  //Array. Append a Row of Thead.(e.g. ["Name","Address"]) 
      sortable           : true,                  //col sort
      row_sep            : '\n',                  //Separator of rows. default '\n'
      col_sep            : ',',                   //Separator(,|\t|;) of cols. default ','

      //like SQL
      select             : '*',                   //select col lists. default '*' are all cols.
      where              : null,                  //Array of where : [{'ColName':'condition'}] etc.
      orderBy            : null,                  //Array of sort col. orderBy:[[colNo|'colName','sortType']]
      limit              : null,                  //Array of limit : [offset,len]

      //Extend Lib
      use                : null,                  //'jqchart:line#canvasID' 'jqchart:bar#canvasID2'
      
      //Etc
      numArignRight      : true,                  //Set the Number TD to "textAlign : 'right'"
      removeDoubleQuote  : true,                  // remove " of "hogehoge"
      col_midasi         : 0,                     //
      col0color          : true,                  //col[0] color sync jQchart line_strokeStyle
      
      //ThemeRoller and class
      defaultThemeRoller : './tm/jquery-ui-themeroller-0/ui.theme.css',
      widget_div         : 'ui-widget',
      thead_default      : 'ui-state-default',
      thead_hover        : 'ui-state-hover',
      tbody_content      : 'ui-widget-content',
      icon_sortN         : 'ui-icon ui-icon-triangle-2-n-s csv2table-sortN',
      icon_sortD         : 'ui-icon ui-icon-triangle-1-s csv2table-sortD',
      icon_sortA         : 'ui-icon ui-icon-triangle-1-n csv2table-sortA',
      corner             : 'ui-corner-all',

      //className table 
      cls_tbl            : 'csv2table-table',
      cls_tbl_b_td       : 'csv2table-table-td',

      //className etc 
      cls_hoboNum        : 'csv2table-hoboNum',   //match to number or Number-like (3 digit + comma)
      cls_legends        : 'csv2table-legends'    //useing in classifyByCol Method. Hanrei box


    },setting);

|Blog | Demo | Wassr | jQuery › Downloads › Plugins › csv2table | ( › jQchart )