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

More than 5 years have passed since last update.

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

http://jsgt.org/lib/jquery/plugin/csv2table/v002/test.htm#nview0

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を読み込んで下記のようなテーブルが表示されます。

NO,名前,種類,年齢,金額

1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

csv2table.png