csv2table.js의 기본 CSS를 리셋하고 CSS를 자유롭게 설정할 수 있는 버전을 발표합니다
6440 단어 JavaScriptcsv2table
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 "
Reference
이 문제에 관하여(csv2table.js의 기본 CSS를 리셋하고 CSS를 자유롭게 설정할 수 있는 버전을 발표합니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/toshirot/items/ac2f93cd6393aea39a40텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)