csv2table.jsのデフォルトCSSをリセットし、自由にCSS設定できるバージョンをリリース

csv2table.jsは最近ほとんどいじってなかったのですが、最近CSSの適用が難しいという質問が増えているので、この際、デフォルトCSSをリセットし、自由にCSS設定可能にできるバージョンを作りました。

csv2tableで作成されるテーブルの各HTML要素にはそれぞれ下記のようなクラス名がついていますので、リセット後はその名前で指定します。

      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

で、リセットのおまじないは、こうです。

<script>
  //デフォルトCSSをリセットする
  $.csv2table.cssReset();
</script>

リセット後はたとえば下記のようなCSSで設定してください

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

これ以外は、今までと同じです。

<script src="./js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./js/jquery.csv2table-0.02-b-4.4.js" type="text/javascript" charset="utf-8"></script>

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

これで、次のようなCSVを読み込んで下記のようなテーブルが表示されます。

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