ソート付き表《完成》添削してください

javascriptでソート付きの表を作りました。
一応自分の希望するような動きにはなったのですが、もっと洗練された書き方があれば教えてください。
ソートしたデータを表示する過程がこれでいいのか？？と思っています。

js
1const tbl_ths =['Name', 'gender','Team', 'Score',];
2let tbl_dat=[
3  ['Tokieda','男','red','2'],
4  ['takahashi','男','blue','12'],
5  ['miyahashi','男','blue','31'],
6  ['taguchi','女','Orange','32'],
7  ['fkoji','男','red','84'],
8  ['masako','女','Blue','49'],
9];
10let tbl_sort;
11let col;
12let _a;
13let _b;
14let cf;
15
16function doSort(){
17
18  const ths =document.querySelectorAll('th');
19  ths.forEach((th,index) =>{
20    if (index !== col){
21      th.className = '';
22    }
23  })
24  tbl_dat.sort((a, b)=> {
25    if(isNaN( a[col])){
26      _a = a[col].toLocaleLowerCase();
27      _b = b[col].toLocaleLowerCase();
28    } else {
29      _a = Number(a[col]);
30      _b = Number(b[col]);
31    }
32  
33    if (_a > _b){
34      return 1*cf
35    } else if (_a < _b){
36      return -1*cf
37    } else {
38      return 0
39    }
40  })
41
42const tbody=document.querySelector('tbody');
43tbody.remove();
44
45  const date = new SetDate(tbl_dat);
46}
47
48
49class SetHead {
50  constructor(els){
51    const table = document.querySelector('table');
52    const thead = document.createElement('thead');
53    const tr=document.createElement('tr');
54    
55    for(let i=0;i<els.length;i++){
56      const th=document.createElement('th');
57       th.innerHTML=els[i];
58       th.addEventListener('click',()=>{
59         col=th.cellIndex;
60    
61        if(th.classList.contains('ascend')){
62          th.className='decend';
63          cf=-1;
64        }else {
65          th.className='ascend';
66          cf=1;
67        }
68        doSort();
69
70      })
71      tr.appendChild(th);
72    }
73    thead.appendChild(tr);
74    table.appendChild(thead);
75  }
76}
77
78class SetDate {
79  constructor(array){
80    const table = document.querySelector('table');
81    const tbody = document.createElement('tbody');
82   
83    array.forEach(els => {
84      const tr=document.createElement('tr');
85
86        for(let i=0;i<els.length;i++){
87          const td=document.createElement('td');
88           td.innerHTML=els[i];
89          tr.appendChild(td);  
90        };
91
92      tbody.appendChild(tr);
93    })
94    table.appendChild(tbody);
95  }
96}
97
98const header=new SetHead(tbl_ths);
99const date = new SetDate(tbl_dat);

html
1<body>
2  
3  <table class="tbl">
4  </table>
5  
6<script src="main.js"></script>
7</body>

css
1*{
2  margin:0;
3  padding:0;
4  box-sizing: border-box;
5}
6.tbl {
7  border-collapse: collapse;
8  margin:20px auto;
9  font-family: Verdana, Geneva, Tahoma, sans-serif;
10  font-size: 16px;
11  & td,& th {
12    width:180px;
13    height: 36px;
14    padding:5px 20px;
15    border:1px solid #E9EAE8;
16  }
17  & thead {
18    cursor: pointer;
19    & th::after {
20      content: '\f0dc';
21      font-family:'FontAwesome';
22      font-size: 12px;
23      color: #ccc;
24      float: right;
25      padding-top: 4px;
26      font-weight: normal;
27    }
28    & th.decend::after {
29      content: '\f0dd';
30      color: #000;
31    }
32    & th.ascend::after {
33      content: '\f0de';
34      color: #000;
35    }
36  }
37  & tbody  tr td:last-child {
38    text-align: right;
39  }
40  & tbody tr:nth-child(2n) {
41    background-color: #f8f8f8;
42  }
43  
44}
45

行動規範の内容に同意します

回答2件

ベストアンサー

コメントに書き入れました。
オブジェクト指向が意味をなしていないと思いました。

追記
document.createElement('thead');
は、複数個登録できない。事前にチェックが必要
1回しか使わないからいいのでは？と思うかもしれないけれど
それならば class で書く必要がないのでは？　といわれてしまう。

javascript
1
2let tbl_sort;//使われてない
3//以下４つは、グローバス変数として使わなくてもできる！
4let col;
5let _a;
6let _b;
7let cf;
8
9function doSort(/* cf これで呼び出してみては？　*/){
10
11  const ths =document.querySelectorAll('th');//テーブル要素が複数あることを想定していない
12  ths.forEach((th,index) =>{
13    if (index !== col){
14      th.className = '';//これは空白で複数していできることを否定している
15    }
16  })
17  tbl_dat.sort((a, b)=> {
18    if(isNaN( a[col])){
19      _a = a[col].toLocaleLowerCase();
20      _b = b[col].toLocaleLowerCase();
21    } else {
22      _a = Number(a[col]);
23      _b = Number(b[col]);
24    }
25
26    if (_a > _b){
27      return 1*cf
28    } else if (_a < _b){
29      return -1*cf
30    } else {
31      return 0
32    }
33  })
34
35const tbody=document.querySelector('tbody');//これも複数のテーブルを考慮していない
36tbody.remove();
37
38  const date = new SetDate(tbl_dat);//なんのために data に保存する？
39}
40
41
42class SetHead {
43  constructor(els){//els の型のチェックがされていない
44    const table = document.querySelector('table');//これも複数のテーブルを考慮していない
45    const thead = document.createElement('thead');// table.createTHead を使う
46    const tr=document.createElement('tr');// tbody.inserRow を使えばあとの appendChild が不要
47
48    for(let i=0;i<els.length;i++){
49      const th=document.createElement('th');//ぜひthでないのなら insertCell でいいような？ tr:td.first-of-type で見た目は弄れる
50       th.innerHTML=els[i];//せっかく DOM を使えるのなら innerHTML の使用は避ける
51       th.addEventListener('click',(/* event */)=>{ //個人的には、イベントの管理は document で行う。
52         col=th.cellIndex;
53
54        if(th.classList.contains('ascend')){
55          th.className='decend';//ここでも複数の指定を破壊している
56          cf=-1;//event.shiftKey を使えば、逆ソートもできるんじゃね？
57        }else {
58          th.className='ascend';
59          cf=1;
60        }
61        doSort();//
62
63      })
64      tr.appendChild(th);//上で指摘したものを使えば不要
65    }
66    thead.appendChild(tr);//上で指摘したものを使えば不要
67    table.appendChild(thead);//上で指摘したものを使えば不要
68    //もし可能ならdocument.createDocumentFragmentを使ってみては？
69  }
70}
71
72//なんのためのクラスなのかわからない。設計図を書くべきなのにその現場でしか使えない設計図を書いている
73class SetDate {
74  constructor(array){
75    const table = document.querySelector('table');//複数の場合はどうする？
76    const tbody = document.createElement('tbody');
77
78    array.forEach(els => {//els がグローバル
79      const tr=document.createElement('tr');//insertRow
80
81        for(let i=0;i<els.length;i++){
82          const td=document.createElement('td');//insertCell
83           td.innerHTML=els[i];//できるなら　textContent
84          tr.appendChild(td); //不要になる
85        };
86
87      tbody.appendChild(tr);//不要になる
88    })
89    table.appendChild(tbody);
90  }
91}
92
93const header=new SetHead(tbl_ths);
94const date = new SetDate(tbl_dat);
95
96/*例えば
97header2=new SetHead(tbl_ths2);
98header3=new SetHead(tbl_ths3);
99header4=new SetHead(tbl_ths4);
100のように、使いまわしができない設計図などただの function でよい！
101*/

質問を閉じてしまったのね
イベントについて流してしまったのでついでに。
document.addEventListener にしているのは、対象のテーブル以外に範囲を広げているけれど
document が全て読み込まれなくてもOKだから。
そして、個々の TH 要素にイベントをくっつけるのは好くない。
やたらとくっつけたがる人が多い。
クリックされた要素から this.table の中の要素か判断する
その要素からTH 要素を取得する。

<th><labele>hoge</label></th>になっているかもしれないから。

js
1class HYOU {
2  constructor (table) {
3    this.table = table;
4  }
5  setData (ary) { }
6  setTHead () { }
7
8  handleEvent (event) {
9    let e = event.target;
10    //this.table.tHead が必ずある前提
11    if (8 === (e.compareDocumentPosition (this.table.tHead) & e.DOCUMENT_POSITION_CONTAINS)) {
12      let th = e.closest ('th');// e === th と限らない　
13      if (th) {
14        console.log (th.cellIndex);
15      }
16    }
17  }
18}
19const a = new HYOU (document.querySelector('table'));
20document.addEventListener ('click', a, false);