<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 4px;
}
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script>
grid.onclick = function(e) {
if(e.target.tagName != 'TH') return;
//when table head is clicked, we sort
let th = e.target; // so that our targets are only THs
sortGrid(th.cellIndex, th.dataset.type);
};
//iteration to see what is in each array item
// for(let i=0; i<rowsArray.length; i++){
// alert(rowsArray[i].innerHTML);
// }
function sortGrid(colNum, type){
let tbody = grid.querySelector('tbody');
let rowsArray = Array.from(tbody.rows);
let compare;
switch(type){
case 'number' :
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};//it returns smaller one first
//rowA.cells[]
break;
case 'string':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
//bigger num of ASCII means prepending alphabet
//so the false one(-1-) should be ahead of true one(1)
//the same :
//return rowA.cells[colNum].innerHTML < rowB.cells[colNum].innerHTML ? -1 : 1;
};
break;
}
rowsArray.sort(compare);
//sort by the function compare
//rowsArray has 5 elems
tbody.append(...rowsArray);
//appends every elems into
//append puts the argument at the end of selection, tbody
//with it from row0 col0, new order of elems overwrite???????
//BUT WHY DOES APPEND WORK AS OVERWRITTING?????
//alert(tbody.innerHTML);
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 4px;
}
th {
cursor: pointer;
}
th:hover {
background: yellow;
}
</style>
</head>
<body>
<table id="grid">
<thead>
<tr>
<th data-type="number">Age</th>
<th data-type="string">Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>5</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Pete</td>
</tr>
<tr>
<td>12</td>
<td>Ann</td>
</tr>
<tr>
<td>9</td>
<td>Eugene</td>
</tr>
<tr>
<td>1</td>
<td>Ilya</td>
</tr>
</tbody>
</table>
<script>
grid.onclick = function(e) {
if(e.target.tagName != 'TH') return;
//when table head is clicked, we sort
let th = e.target; // so that our targets are only THs
sortGrid(th.cellIndex, th.dataset.type);
};
//iteration to see what is in each array item
// for(let i=0; i<rowsArray.length; i++){
// alert(rowsArray[i].innerHTML);
// }
function sortGrid(colNum, type){
let tbody = grid.querySelector('tbody');
let rowsArray = Array.from(tbody.rows);
let compare;
switch(type){
case 'number' :
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};//it returns smaller one first
//rowA.cells[]
break;
case 'string':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
//bigger num of ASCII means prepending alphabet
//so the false one(-1-) should be ahead of true one(1)
//the same :
//return rowA.cells[colNum].innerHTML < rowB.cells[colNum].innerHTML ? -1 : 1;
};
break;
}
rowsArray.sort(compare);
//sort by the function compare
//rowsArray has 5 elems
tbody.append(...rowsArray);
//appends every elems into
//append puts the argument at the end of selection, tbody
//with it from row0 col0, new order of elems overwrite???????
//BUT WHY DOES APPEND WORK AS OVERWRITTING?????
//alert(tbody.innerHTML);
}
</script>
</body>
</html>
댓글
댓글 쓰기