Skip to content

Commit 17e8fb6

Browse files
iliakaniliakan
committed
fixes #1673
1 parent e97e437 commit 17e8fb6

File tree

4 files changed

+87
-93
lines changed

4 files changed

+87
-93
lines changed

‎2-ui/1-document/07-modifying-document/12-sort-table/solution.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
22

3-
43
```js
5-
let sortedRows = Array.from(table.tBodies[0].rows) // (1)
6-
.sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1); // (2)
4+
let sortedRows = Array.from(table.tBodies[0].rows) // 1
5+
.sort((rowA, rowB) => { // 2
6+
let valueA = rowA.cells[0].innerHTML;
7+
let valueB = rowB.cells[0].innerHTML;
8+
return valueA > valueB ? 1 :
9+
valueA == valueB ? 0 : -1;
10+
});
711

812
table.tBodies[0].append(...sortedRows); // (3)
913
```
@@ -14,6 +18,8 @@ The step-by-step algorthm:
1418
2. Then sort them comparing by the content of the first `<td>` (the name field).
1519
3. Now insert nodes in the right order by `.append(...sortedRows)`.
1620

17-
Please note: we don't have to remove row elements, just "re-insert", they leave the old place automatically.
21+
We don't have to remove row elements, just "re-insert", they leave the old place automatically.
22+
23+
Please note: our comparison function `(2)` returns `0` for equal table rows. That's handy for cases when we accidentally re-sort the table. E.g. if our users triggers such re-sorting. Returning `0` makes sure that same-named users won't get re-ordered, as opposed to a more simpler solution `valueA > valueB ? 1 : -1`.
1824

19-
Also note: even if the table HTML doesn't have `<tbody>`, the DOM structure always has it. So we must insert elements as `table.tBodes[0].append(...)`: a simple `table.append(...)` would fail.
25+
P.S. In our case, there's an explicit `<tbody>` in the table, but even if HTML table doesn't have `<tbody>`, the DOM structure always has it.

‎2-ui/1-document/07-modifying-document/12-sort-table/solution.view/index.html‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
11
<!DOCTYPE html>
2-
<html>
3-
<body>
42

5-
<table id="table">
6-
<tr>
7-
<th>Name</th>
8-
<th>Surname</th>
9-
<th>Age</th>
10-
</tr>
11-
<tr>
12-
<td>John</td>
13-
<td>Smith</td>
14-
<td>10</td>
15-
</tr>
16-
<tr>
17-
<td>Pete</td>
18-
<td>Brown</td>
19-
<td>15</td>
20-
</tr>
21-
<tr>
22-
<td>Ann</td>
23-
<td>Lee</td>
24-
<td>5</td>
25-
</tr>
26-
</table>
3+
<table id="table">
4+
<thead>
5+
<tr>
6+
<th>Name</th><th>Surname</th><th>Age</th>
7+
</tr>
8+
</thead>
9+
<tbody>
10+
<tr>
11+
<td>John</td><td>Smith</td><td>10</td>
12+
</tr>
13+
<tr>
14+
<td>Pete</td><td>Brown</td><td>15</td>
15+
</tr>
16+
<tr>
17+
<td>Ann</td><td>Lee</td><td>5</td>
18+
</tr>
19+
<tr>
20+
<td>...</td><td>...</td><td>...</td>
21+
</tr>
22+
</tbody>
23+
</table>
2724

28-
<script>
29-
let sortedRows = Array.from(table.rows)
30-
.slice(1)
31-
.sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
25+
<script>
26+
let sortedRows = Array.from(table.tBodies[0].rows)
27+
.sort((rowA, rowB) => {
28+
let valueA = rowA.cells[0].innerHTML;
29+
let valueB = rowB.cells[0].innerHTML;
30+
return valueA > valueB ? 1 :
31+
valueA == valueB ? 0 : -1;
32+
});
3233

33-
table.tBodies[0].append(...sortedRows);
34-
</script>
35-
36-
</body>
37-
</html>
34+
table.tBodies[0].append(...sortedRows);
35+
</script>

‎2-ui/1-document/07-modifying-document/12-sort-table/source.view/index.html‎

Lines changed: 24 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,27 @@
11
<!DOCTYPE html>
2-
<html>
3-
<body>
42

5-
<table id="table">
6-
<tr>
7-
<th>Name</th>
8-
<th>Surname</th>
9-
<th>Age</th>
10-
</tr>
11-
<tr>
12-
<td>John</td>
13-
<td>Smith</td>
14-
<td>10</td>
15-
</tr>
16-
<tr>
17-
<td>Pete</td>
18-
<td>Brown</td>
19-
<td>15</td>
20-
</tr>
21-
<tr>
22-
<td>Ann</td>
23-
<td>Lee</td>
24-
<td>5</td>
25-
</tr>
26-
</table>
3+
<table id="table">
4+
<thead>
5+
<tr>
6+
<th>Name</th><th>Surname</th><th>Age</th>
7+
</tr>
8+
</thead>
9+
<tbody>
10+
<tr>
11+
<td>John</td><td>Smith</td><td>10</td>
12+
</tr>
13+
<tr>
14+
<td>Pete</td><td>Brown</td><td>15</td>
15+
</tr>
16+
<tr>
17+
<td>Ann</td><td>Lee</td><td>5</td>
18+
</tr>
19+
<tr>
20+
<td>...</td><td>...</td><td>...</td>
21+
</tr>
22+
</tbody>
23+
</table>
2724

28-
<script>
29-
// ... your code ...
30-
</script>
31-
32-
</body>
33-
</html>
25+
<script>
26+
// ... your code ...
27+
</script>

‎2-ui/1-document/07-modifying-document/12-sort-table/task.md‎

Lines changed: 21 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,29 @@ importance: 5
66

77
There's a table:
88

9+
```html run
910
<table>
10-
<tr>
11-
<th>Name</th>
12-
<th>Surname</th>
13-
<th>Age</th>
14-
</tr>
15-
<tr>
16-
<td>John</td>
17-
<td>Smith</td>
18-
<td>10</td>
19-
</tr>
20-
<tr>
21-
<td>Pete</td>
22-
<td>Brown</td>
23-
<td>15</td>
24-
</tr>
25-
<tr>
26-
<td>Ann</td>
27-
<td>Lee</td>
28-
<td>5</td>
29-
</tr>
30-
<tr>
31-
<td>...</td>
32-
<td>...</td>
33-
<td>...</td>
34-
</tr>
11+
<thead>
12+
<tr>
13+
<th>Name</th><th>Surname</th><th>Age</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
<tr>
18+
<td>John</td><td>Smith</td><td>10</td>
19+
</tr>
20+
<tr>
21+
<td>Pete</td><td>Brown</td><td>15</td>
22+
</tr>
23+
<tr>
24+
<td>Ann</td><td>Lee</td><td>5</td>
25+
</tr>
26+
<tr>
27+
<td>...</td><td>...</td><td>...</td>
28+
</tr>
29+
</tbody>
3530
</table>
31+
```
3632

3733
There may be more rows in it.
3834

0 commit comments

Comments
 (0)