Sandbox::https://fa.javascript.info/task/sort-table

بازگشت به درس

این محتوا تنها در این زبان‌ها موجود است: Čeština, Dansk, English, Español, Français, Indonesia, Italiano, 日本語, 한국어, Русский, Türkçe, Українська, Oʻzbek, 简体中文. لطفاً به ما

There’s a table:

<table>
<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.

Write the code to sort it by the "name" column.

باز کردن یک sandbox برای تمرین.

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

          let sortedRows = Array.from(table.tBodies[0].rows) // 1
  .sort((rowA, rowB) => rowA.cells[0].innerHTML.localeCompare(rowB.cells[0].innerHTML));

table.tBodies[0].append(...sortedRows); // (3)
        

The step-by-step algorthm:

Get all <tr>, from <tbody>.
Then sort them comparing by the content of the first <td> (the name field).
Now insert nodes in the right order by .append(...sortedRows).

We don’t have to remove row elements, just “re-insert”, they leave the old place automatically.

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.

باز کردن راه‌حل درون sandbox.

Sort the table