en.javascript.info/2-ui/1-document/07-modifying-document/12-sort-table/solution.md
Peter Roche 4541b0481c
Update solution.md
Putting `<tbody>` in backticks. Wasn't showing.
2019-11-03 22:52:10 -07:00

893 B

The solution is short, yet may look a bit tricky, so here I provide it with extensive comments:

let sortedRows = Array.from(table.rows)
  .slice(1)
  .sort((rowA, rowB) => rowA.cells[0].innerHTML > rowB.cells[0].innerHTML ? 1 : -1);

table.tBodies[0].append(...sortedRows);
  1. Get all <tr>, like table.querySelectorAll('tr'), then make an array from them, cause we need array methods.

  2. The first TR (table.rows[0]) is actually a table header, so we take the rest by .slice(1).

  3. Then sort them comparing by the content of the first <td> (the name field).

  4. Now insert nodes in the right order by .append(...sortedRows).

    Tables always have an implicit <tbody> element, so we need to take it and insert into it: a simple table.append(...) would fail.

    Please note: we don't have to remove them, just "re-insert", they leave the old place automatically.