GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing id.javascript.info — Mengurutkan Tabel

Mengurutkan Tabel

Berikut adalah sebuah tabel:

<table>
  <thead>
    <tr>
      <th>Nama</th>
      <th>Nama Belakang</th>
      <th>Usia</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>

Mungkin ada lebih banyak baris di dalamnya.

Tulislah kode untuk mengurutkannya berdasarkan kolom "Nama".

Buka sandbox untuk tugas tersebut.

Solusinya singkat, namun mungkin terlihat sedikit rumit, jadi di sini saya berikan dengan komentar yang ekstensif:

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)

Algoritma langkah-demi-langkah:

Dapatkan semua <tr>, dari <tbody>.
Kemudian urutkan mereka dengan membandingkan berdasarkan konten <td> pertama (bidang nama).
Sekarang masukkan node dengan urutan yang benar dengan .append(...sortedRows).

Kita tidak perlu menghapus elemen baris, cukup “memasukkan kembali”, karena mereka akan meninggalkan tempat lama secara otomatis.

P.S. Dalam kasus kita, ada yang eksplisit dalam tabel, tetapi bahkan jika tabel HTML tidak memiliki , struktur DOM selalu memiliki elemen tersebut.

Buka solusi di kotak pasir.

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.