Jadvalni tartiblang

Mana bu jadval:

<table id="table">
  <thead>
    <tr>
      <th>Ism</th>
      <th>Familiya</th>
      <th>Yosh</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>

Unda ko’proq qatorlar bo’lishi mumkin.

Uni ism ustuni bo`yicha tartiblash uchun kodni yozing.

Vazifa uchun sandbox-ni oching.

Yechim qisqa, ammo biroz qiyin ko’rinishi mumkin, shuning uchun men unga keng sharhlar beraman:

          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)
        

Bosqichma-bosqich algoritm:

<tbody> dan barcha <tr>-ni oling.
Keyin ularni birinchi <td> (ism maydoni) mazmuni bo’yicha taqqoslab tartiblang.
Endi tugunlarni .append(...sortedRows) orqali kerakli tartibda kiriting.

Biz qator elementlarini olib tashlashimiz shart emas, shunchaki “qayta kiritish”, ular eski joyni avtomatik ravishda tark etishadi.

P.S. Bizning holatda, jadvalda aniq <tbody> mavjud, lekin HTML jadvalida <tbody> bo’lmasa ham, DOM tuzilmasi har doim shunday bo’ladi.

Yechimni sandbox-da oching.