【Javascript】jQuery でCSVをテーブル表示

読み込んだCSVファイル /gm/gc/24176/file/test.txt

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"

 

<script src="./jquery-min.js"
      type="text/javascript"></script>
<script src="./jquery.csv2table.js" 
      type="text/javascript"></script>

<input 
  class   = "btn1"
  type    = "button"
  onclick = "$('#view1').csv2table('./file/test.txt');"
  value   = "Load CSV">

<!-- ここへ表が出力されます -->
<div id="view1"></div>

 

ソースは次の通り。

<input 
  class   = "btn1"
  type    = "button"
  onclick = "
    $('#view2').csv2table('./file/test.txt',{
      onload  : function(id,op,data,ary){
        $('tr:even','#'+id).css('background','#eee')
      }
    })"
  value   = "Load CSV">

<!-- ここへ表が出力されます -->
<div id="view2"></div>

$('tr:even','#'+id).css('background','#eee')は、ここでは、idにview2が渡りますので、 $('tr:even','#view2').css('background','#eee')と同じ意味ですが、 背景色をTR行ごとに縞々にしています。

この部分を、読み下してみると、'#view2'要素内の、tr要素で、0行目から数えて偶数番目の(:even)要素のCSSで、背景色backgroundを#eeeに指定します、という意味になります。

TD方向に塗ることもできます。



nth-child(2n+1)はCSS3の疑似クラスで、この場合は、1つ置きにgoldになります。ちなみに、nth-childはブラウザごとに実装が異なりますが、 もちろん、jQueryではクロスブラウザに動作します。

ソースは次の通り。

<input 
  class   = "btn1"
  type    = "button"
  onclick = "
    $('#view3').csv2table('./file/test.txt',{
      onload  : function(id,op,data,ary){
        $('#'+id)           .find('td:nth-child(2n+1)').css('background','gold').end()           .find('tr:even').css('background','#ccc')
      }
    })"
  value   = "Load CSV">

<!-- ここへ表が出力されます -->
<div id="view3"></div>

$('#'+id)の後ろのfind()メソッドは、$('#'+id)で絞り込んだ要素からさらに'td:nth...'な要素を絞り込みます。 その絞り込んだ要素へ.css('background','gold')を適用してから、.end()で絞り込む前の検索結果に戻ります。

そして、再度、find()メソッドで'tr:even'な要素を絞りこんで、.css('background','#eee')を適用するという具合です。

次ページでは、引数へ指定できるオプションなどをみてみます。