Jadvalni tartiblang
muhimlik: 5
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.
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.