jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2017-04-09 23:17:57 +02:00
parent 011d72bf17
commit 1b03278014
6 changed files with 30 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

98
2-ui/2-events/03-event-delegation/3-sortable-table/solution.view/index.html Normal file
View file

@ -0,0 +1,98 @@
<!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;
let th = e.target;
// if TH, then sort
// cellIndex is the number of th:
// 0 for the first column
// 1 for the second column, etc
sortGrid(th.cellIndex, th.dataset.type);
};
function sortGrid(colNum, type) {
let tbody = grid.querySelector('tbody');
let rowsArray = Array.from(tbody.rows);
// compare(a, b) compares two rows, need for sorting
let compare;
switch (type) {
case 'number':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
};
break;
case 'string':
compare = function(rowA, rowB) {
return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML ? 1 : -1;
};
break;
}
// sort
rowsArray.sort(compare);
tbody.append(...rowsArray);
}
</script>
</body>
</html>