HTML
sorting할 열의 thead의 th에 data-sort 를 달아준다. 숫자라면 value는 "num" 일반 문자라면 "str"
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>let's sort table</title>
<link rel="stylesheet" type="text/css" href="./src/sort.css"/>
<script src="./main.js" type="module"></script>
</head>
<body>
<h1>Sort Table</h1>
<h3 style="margin-bottom:2rem;">thead의 th를 눌러보세양</h3>
<table>
<colgroup>
<col><col><col><col>
</colgroup>
<thead>
<tr>
<th data-sort="num">id</th>
<th data-sort="str">First Name</th>
<th data-sort="str">Last Name</th>
<th data-sort="num">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th>004</th>
<td>Moira</td>
<td>O'Deorain</td>
<td>48</td>
</tr>
<tr>
<th>005</th>
<td>Siebren</td>
<td>De Kuiper</td>
<td>62</td>
</tr>
<tr>
<th>006</th>
<td>Loki</td>
<td>Odinson</td>
<td>1024</td>
</tr>
<tr>
<th>007</th>
<td>Thor</td>
<td>Odinson</td>
<td>1500</td>
</tr>
<tr>
<th>003</th>
<td>Grogu</td>
<td>Djarin</td>
<td>50</td>
</tr>
<tr>
<th>002</th>
<td>Luke</td>
<td>Skywalker</td>
<td>28</td>
</tr>
<tr>
<th>001</th>
<td>Din</td>
<td>Djarin</td>
<td>38</td>
</tr>
</tbody>
</table>
</body>
</html>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/* sort */
[data-sort]{
padding:1em 2em;
background:rgb(15, 16, 49);border-color:#fff;
color:#fff;
cursor:pointer;
}
[data-sort]::after{
content:'▼';
margin-left:1em;
font-size:.5em;color:yellow;}
|
cs |
JS-SortTable
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
export class SortTable{
constructor(){
this.cidx = undefined;
this.$table = undefined;
this.$tbody = undefined;
this.$$tr = undefined;
}
/* METHOD */
onClick(target){
this.cidx = target.cellIndex;
this.$table = this.get_table(target);
this.$tbody = this.$table.getElementsByTagName('TBODY')[0];
this.$$tr = this.$tbody.children;
const type = target.dataset.sort;
for(let i=0; i<this.$$tr.length; i++){
this.sorting(type);
}
}//onClick
get_table(target){
let $table = target;
while($table.tagName !== "TABLE"){$table = $table.parentElement;}
return $table;
}//get_table
sorting(type){
let predi;
for(let k=0; k<this.$$tr.length - 1; k++){
const $curr = this.$$tr[k].children[this.cidx];
const $next = this.$$tr[k+1].children[this.cidx];
switch(type){
case "str" :
predi = $curr.innerText.toLowerCase() > $next.innerText.toLowerCase();
break;
case "num" :
default :
predi = Number($curr.innerText) > Number($next.innerText);
break;
}//switch
if(predi){
this.$tbody.insertBefore(this.$$tr[k], this.$$tr[k+1].nextElementSibling);
}//if
}//for
}//sorting
}//SortTable
|
cs |
JS- main.js
|
1
2
3
4
5
6
7
8
9
10
|
import { SortTable } from "./src/sort.js";
const SORT = new SortTable();
window.addEventListener('click',(e)=>{
const target = e.target;
if(target.dataset.sort){
SORT.onClick(target);
}
});
|
cs |
'CSS&JS > ⚡Thinkers' 카테고리의 다른 글
| [JS]바닐라 자바스크립트로 24시간 쿠키 모달 끄기/켜기 설정하기 (0) | 2022.04.22 |
|---|---|
| [JS]vanilla JS - class 문법으로 모달창 구현하기 (draggable) (0) | 2022.04.06 |
| [JS] thead의 th를 누르면 그 항목에 맞춰 table sort 되게 하기 (0) | 2022.03.31 |
| promise의 finally를 이용한 로딩화면 (0) | 2022.03.02 |
| [JS]바닐라 자바스크립트로 swiper 흉내내보기 v1.0 (0) | 2022.02.18 |