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

fixes #1673

Browse source
This commit is contained in:
Ilya Kantor 2019-12-26 15:43:08 +03:00
parent e97e43717f
commit 17e8fb6831
4 changed files with 87 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

16
2-ui/1-document/07-modifying-document/12-sort-table/solution.md
View file

@ -1,9 +1,13 @@
The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:
```js
let sortedRows = Array.from(table.tBodies[0].rows) // (1)
.sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1); // (2)
let sortedRows = Array.from(table.tBodies[0].rows) // 1
.sort((rowA, rowB) => { // 2
let valueA = rowA.cells[0].innerHTML;
let valueB = rowB.cells[0].innerHTML;
return valueA > valueB ? 1 :
valueA == valueB ? 0 : -1;
});
table.tBodies[0].append(...sortedRows); // (3)
```
@ -14,6 +18,8 @@ The step-by-step algorthm:
2. Then sort them comparing by the content of the first `<td>` (the name field).
3. Now insert nodes in the right order by `.append(...sortedRows)`.
Please note: we don't have to remove row elements, just "re-insert", they leave the old place automatically.
We don't have to remove row elements, just "re-insert", they leave the old place automatically.
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.
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`.
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.

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

@ -1,37 +1,35 @@
<!DOCTYPE html>
<html>
<body>
<table id="table">
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Name</th><th>Surname</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td><td>Smith</td><td>10</td>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>10</td>
<td>Pete</td><td>Brown</td><td>15</td>
</tr>
<tr>
<td>Pete</td>
<td>Brown</td>
<td>15</td>
<td>Ann</td><td>Lee</td><td>5</td>
</tr>
<tr>
<td>Ann</td>
<td>Lee</td>
<td>5</td>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
</tbody>
</table>
<script>
let sortedRows = Array.from(table.rows)
.slice(1)
.sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);
<script>
let sortedRows = Array.from(table.tBodies[0].rows)
.sort((rowA, rowB) => {
let valueA = rowA.cells[0].innerHTML;
let valueB = rowB.cells[0].innerHTML;
return valueA > valueB ? 1 :
valueA == valueB ? 0 : -1;
});
table.tBodies[0].append(...sortedRows);
</script>
</body>
</html>
</script>

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

@ -1,33 +1,27 @@
<!DOCTYPE html>
<html>
<body>
<table id="table">
<table id="table">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
<th>Name</th><th>Surname</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td><td>Smith</td><td>10</td>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>10</td>
<td>Pete</td><td>Brown</td><td>15</td>
</tr>
<tr>
<td>Pete</td>
<td>Brown</td>
<td>15</td>
<td>Ann</td><td>Lee</td><td>5</td>
</tr>
<tr>
<td>Ann</td>
<td>Lee</td>
<td>5</td>
<td>...</td><td>...</td><td>...</td>
</tr>
</table>
</tbody>
</table>
<script>
<script>
// ... your code ...
</script>
</body>
</html>
</script>

46
2-ui/1-document/07-modifying-document/12-sort-table/task.md
View file

@ -6,33 +6,29 @@ importance: 5
There's a table:
```html run
<table>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>Smith</td>
<td>10</td>
</tr>
<tr>
<td>Pete</td>
<td>Brown</td>
<td>15</td>
</tr>
<tr>
<td>Ann</td>
<td>Lee</td>
<td>5</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<thead>
<tr>
<th>Name</th><th>Surname</th><th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td><td>Smith</td><td>10</td>
</tr>
<tr>
<td>Pete</td><td>Brown</td><td>15</td>
</tr>
<tr>
<td>Ann</td><td>Lee</td><td>5</td>
</tr>
<tr>
<td>...</td><td>...</td><td>...</td>
</tr>
</tbody>
</table>
```
There may be more rows in it.