デフォルトCSSのリセット方法 Reset the CSS ( default style sheet of csv2table )
csv2tableのデフォルトCSSをリセットし、自由にCSS設定する。

このページに$.csv2table.cssReset()を適用したサンプル

<script>

  //デフォルトCSSをリセットする *リセットした場合は、たとえば下記のようなCSSで設定してください
  $.csv2table.cssReset();
  
</script>
  
<style>
div.csv2table-div {
  padding           : 10px; 
  margin            : 1px;
}
table.csv2table-table {
  border-collapse   : collapse;
  border-spacing    : 0px;
  margin-bottom     : 10px;
}
th.csv2table-table-th{
  border-color      : #eee #999 #777 #bbb;
  border-style      : solid;
  border-width      : 1px;
  background-color  : rgba(124,100,0,0.5); 
  padding           : 12px;
  font-size         : 12px;
  text-align        : center;
}
td.csv2table-table-td{
  border-color      : #eee #999 #777 #bbb;
  border-style      : solid;
  border-width      : 1px;
  padding           : 12px;
  font-size         : 12px;
  text-align        : center;
}

/*先頭列のTD背景色をorangeにする*/
td.csv2table-table-td:nth-child(1){
  background-color  : orange;
}

th.csv2table-sortMark{

}
td.csv2table-hoboNum{

}
</style>

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

<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区切り

<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>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

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

<!--[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/ccchart.js" charset="utf-8"></script>


<style>
/* ラベル Y軸 */
.jQchart-labelY-canvasMyID2{
	font-size : 12px;
}

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

</style>

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:line#canvasMyID2',
         roundedUpMaxY: 0,
         minY     : 0,
         title    : 'use ccchart type line'
       });"
       value   = "use: ccchart:line ">

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:line#canvasMyID2',
         roundedUpMaxY: 0,
         type     : 'line',
         useMarker: 'css-ring',
         lineWidth: 8,
         borderWidth: 4,
         markerWidth: 20,
         colorSet : 
          ['#666','#aaa','#5b7e91','#4c6cb3','#eee'],
         width    : 700,
         title    : 'use ccchart type line, css-hybrid'
       });"
       value   = "use: ccchart:line + css-hybrid">
       

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:line#canvasMyID2',
         roundedUpMaxY: 0,
         minY     : 0,
         bgGradient: {
            'direction':'vertical',
            'from':'#222',
            'to'  :'#4c6cb3'
         },
         valColor : ['rgba(255,200,200,0.9)','rgba(255,0,255,0.9)','rgba(255,255,0,1)'],
         colorSet : 
              ['#666','#aaa','#ccc'],
         useMarker: 'arc',
         width    : 600,
         useVal   : 'yes',
         title    : 'use ccchart type line'
       });"
       value   = "use: ccchart:line ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:bar#canvasMyID2',
         title    : 'use ccchart type bar',
         width    : 500
       });"
       value   = "use: ccchart:bar ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:stackedarea#canvasMyID2',
         useVal   : 'yes',
         title    : 'use ccchart type stackedarea'
       });"
       value   = "use: ccchart:stackedarea ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:stacked#canvasMyID2',
         useVal   : 'yes',
         title    : 'use ccchart type stacked'
       });"
       value   = "use: ccchart:stacked ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:bezi2#canvasMyID2',
         title    : 'use ccchart type bezi2'
       });"
       value   = "use: ccchart:bezi2 ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:area#canvasMyID2',
         title    : 'Area Chart',
        'subTitle': '面チャートです',
        'colorSet': 
              ['rgba(0,150,250,0.5)','rgba(200,0,250,0.4)','rgba(250,250,0,0.3)'],
        'useMarker': 'arc'
       });"
       value   = "use: ccchart:area ">
       
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view402').csv2table('./data/Book4chart.csv',{
         use      : 'ccchart:stacked%#canvasMyID2',
         title    : 'use ccchart type stacked%'
       });"
       value   = "use: ccchart:stacked%">

<br>

<canvas id="canvasMyID2"></canvas>
<div id="view402"></div>

名前,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.use ( use jQchart ) 列カンマ区切り / 行改行\r\n区切り + jQchart

<!--[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:100,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:100,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区切り

<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>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

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

<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>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000 "
2,タマ,ねこ,"5","80,000 "
3,チヤー,いぬ,"12","5,000,000 "

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

<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区切り

<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>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

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

<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','#eee')
             } 
       });" value="Run">

<div id="view42"></div>

ＮＯ,名前,種類,年齢,金額
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区切り

<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との比較

<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 = "$('#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区切り

<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 
       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(条件)

<!--[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-canvasMyID20{
	font-size : 12px;
}

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

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view453').csv2table('./data/Book4chart.csv',{
         use      : 'jqchart:line#canvasMyID20',
         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#canvasMyID20',
         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="canvasMyID20" 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桁カンマ値含む)の色をオレンジに変えてみる

<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>

ＮＯ,名前,種類,年齢,金額
1,アイ,さる,"10","100,000"
2,タマ,ねこ,"5","80,000"
3,チヤー,いぬ,"12","5,000,000"

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

<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>

ＮＯ,名前,種類,年齢,金額
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 つの文字と一致)

<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後の連番で記述します)

<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 = "$('#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>

ＮＯ,名前,種類,年齢,金額
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。

<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 = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3]
                });"
       value="limit : [3]">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0,5]
                });"
       value="limit : [0,5]">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [3,15]
                });"
       value="limit : [3,15]">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    orderBy : [['金額','D']],
                    limit   : [3]
                });"
       value="orderBy : [['金額','D']],limit : [3]">
<input 
       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 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv');"
       value="limitなし">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : null
                });"
       value="limit : null">
<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#view543').csv2table('./data/Book12-4sort.csv',{
                    limit : [0]
                });"
       value="limit : [0]">

<div id="view543"></div>

ＮＯ,名前,種類,年齢,金額
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 文字囲み""を残す)

<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>

ＮＯ,名前,種類,年齢,金額
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)

<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>

ＮＯ,名前,種類,年齢,金額
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

<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>

ＮＯ,名前,種類,年齢,金額
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.

<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

<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+カスタマイズ

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

<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.

<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 (.csv2table-table-th) Delimited by a line break (CRLF).one or more fields, separated by commas.
列カンマ区切り / 行改行\r\n区切り (CSSで色づけ !importantを使います。非推奨 Non-recommendation / CSSで色づけは、 csv2table-0.02-b-3x以降は、テーマローラーで指定する方式に変えたいと思っています。行うなら上記のonload後、クロスブラウザなjQueryのCSSメソッドを使うのが安全。)

version:csv2table-0.02-b-4.4で$.csv2table.cssReset()メソッドを追加しました。上の「デフォルト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-th {
  background-color  : #fff88c !important;
  border-color      : #aaa    !important;
  font-weight       : 100     !important;
}
</style>

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

<div id="view31"></div>

ＮＯ,名前,種類,年齢,金額
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,
      nowloadingImg      : $.csv2table.loadImg,              //Image of now loading...
      nowloadingMsg      : 'now loading...',                 //Massege of  now loading...
      sortNImg           : $.csv2table.sortNImg,             //Sort IMG N
      sortDImg           : $.csv2table.sortDImg,             //Sort IMG D
      sortAImg           : $.csv2table.sortAImg,             //Sort IMG A
      removeDoubleQuote  : true,                             // remove " of "hogehoge"
      col_midasi         : 0,                                //
      row_sep            : '\n',                             //Separator of rows. default '\n'
      col_sep            : ',',                              //Separator(,|\t|;) of cols. default ','
      sortable           : true,                             //col sort
      select             : '*',                              //select col lists. default '*' is all cols.
      orderBy            : null,                             //array of sort col. orderBy:[[colNo|'colName','sortType']]
      where              : null,                             //array of where : [{'ColName':'condition'}] etc.
      limit              : null,                             //array of limit : [offset,len]
      col0color          : true,                             //col[0] color sync jQchart line_strokeStyle
      numArignRight      : true,                             //Set the Number TD to "textAlign : 'right'"
      onload             : null,                             //collback function (id,op,data,ary) {}
      use                : null,                             // 'jqchart:line#canvasID'
      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_hoboNum  : 'csv2table-hoboNum',              //className 
      className_sortMark : 'csv2table-sortMark',             //className 
      className_legends  : 'csv2table-legends'               //className
    },setting);

画像 csv2tableを実行前に次のように指定することで、好きなソート用画像とnow loading画像を使えます。

  $.extend($.csv2table,{
    loadImg  : './img/icon-loadinfo.gif', //Image of now loading...
    sortNImg : './img/icon-n.gif',        //ソート初期画像
    sortDImg : './img/icon-d.gif',        //降順画像
    sortAImg : './img/icon-a.gif'         //昇順画像
  })

* csv2table-0.02-b-2.5 以降、下記のように個々に引数でも指定できます。

<input 
       class   = "btn1"
       type    = "button"
       onclick = "$('#viewIcon1').csv2table('./data/Book12-utf8.csv',{
                    nowloadingImg : './img/ajax-loader.gif',
                    sortNImg : './img/icon-n-orange.gif',
                    sortDImg : './img/icon-d-orange.gif',
                    sortAImg : './img/icon-a-orange.gif'
                });"
       value="Run">
<div id="viewIcon1"></div>

jquery.csv2table.js

Contents