- API HTMLTableElement sudah ada sejak lama, tetapi hampir tidak pernah digunakan sebagai antarmuka bawaan untuk memanipulasi tabel HTML
- Dengan API ini, Anda dapat langsung membuat dan mengakses tbody, thead, tfoot, caption, row, cell, dan lainnya, tanpa perlu me-render ulang seluruh tabel saat ada perubahan
- Contoh kode menunjukkan cara mengubah data array bertingkat menjadi tabel dan menambahkan baris serta sel melalui
insertRow() dan insertCell()
- Berbagai manipulasi dimungkinkan, seperti mengakses sel berdasarkan indeks seperti
t.rows[1].cells[1], atau menambahkan baris terakhir dengan insertRow(-1)
- Penulis menyebut API ini memiliki potensi perluasan fungsi tabel sebagai struktur data, dan ada ruang untuk menambahkan event atau fitur ekstra seperti pada form
Ikhtisar API tabel HTML
- Kebanyakan developer membuat tabel dengan metode DOM (
createElement dan sejenisnya) atau menyisipkan string innerHTML, tetapi cara kedua memiliki risiko keamanan
- HTML memiliki API HTMLTableElement lama yang memungkinkan penanganan body, row, cell, header, footer, caption, summary dari tabel
- API ini memungkinkan manipulasi elemen individual tanpa me-render ulang seluruh tabel
Contoh kode: membuat tabel dari array
- Contoh ini mengubah array bertingkat berikut menjadi tabel
[['one','two','three'], ['four','five','six']]
- Tabel dibuat dengan
document.createElement('table'), lalu setiap baris (insertRow) dan sel (insertCell) ditambahkan melalui perulangan
- Isi tiap sel ditetapkan dengan
innerText
Mengakses dan mengubah sel
- Sel pada tabel yang sudah dibuat dapat diakses berdasarkan indeks
- Contoh:
t.rows[1].cells[1] → <td>five</td>
- Baris dan sel juga bisa dihapus atau ditambahkan
- Contoh:
t.insertRow(-1) untuk menambahkan baris di akhir
- Buat sel baru dengan
t.rows[2].insertCell(0), lalu isi nilainya dengan innerText = 'foo'
Keterbatasan API
- Ada aturan indeks yang tidak intuitif, seperti
insertRow(-1)
- Tidak ada cara untuk langsung membuat elemen TH, sehingga semua sel diperlakukan sebagai TD
Potensi pengembangan ke depan
- Penulis menyoroti kenyataan bahwa membuat tabel masih terasa merepotkan, dan mengusulkan peninjauan ulang API ini untuk memperluas fungsinya
- Seperti HTML form yang mendapat tambahan formData atau event change, tabel juga bisa diberi event atau fitur tingkat lanjut
- Dengan begitu, tabel dapat memiliki posisi bukan sekadar alat layout, tetapi sebagai struktur data
Belum ada komentar.