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

1
2-ui/2-events/03-event-delegation/3-sortable-table/solution.md Normal file
View file

@ -0,0 +1 @@

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>

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

@ -0,0 +1,61 @@
<!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>
// ...your code...
</script>
</body>
</html>

43
2-ui/2-events/03-event-delegation/3-sortable-table/task.md Normal file
View file

@ -0,0 +1,43 @@
importance: 4
---
# Sortable table
Make the table sortable: clicks on `<th>` elements should sort it by corresponding column.
Each `<th>` has the type in the attribute, like this:
```html
<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>10</td>
<td>Ann</td>
</tr>
...
</tbody>
</table>
```
In the example above the first column has numbers, and the second one -- strings. The sorting function should handle sort according to the type.
Only `"string"` and `"number"` types should be supported.
The working example:
[iframe border=1 src="solution" height=190]
P.S. The table can be big, with any number of rows and columns.