csv2table.js의 기본 CSS를 리셋하고 CSS를 자유롭게 설정할 수 있는 버전을 발표합니다

6440 단어 JavaScriptcsv2table
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를 읽으면 다음 테이블이 표시됩니다.
NO,名前,種類,年齢,金額
1,アイ,さる,10,"100,000 "
2,タマ,ねこ,5,"80,000 "
3,チヤー,いぬ,12,"5,000,000 "
4,ピー,とり,1,"3,000 "

좋은 웹페이지 즐겨찾기