Penukar Jadual HTML ke JSON/CSV

Untuk menukar jadual HTML kepada JSON, sel baris pengepala menjadi kunci objek anda dan setiap <tr> seterusnya menjadi satu objek — penukaran songsang membina jadual <thead>/<tbody> daripada struktur yang sama. Alat ini melakukan penukaran sepenuhnya dalam pelayar anda menggunakan DOMParser terbina dalam, tanpa sebarang data dimuat naik ke mana-mana.

Apakah alat ini?

Halaman web sering mempersembahkan data dalam elemen <table> HTML — halaman harga, halaman statistik, senarai yang dikikis — tetapi markup itu tidak boleh terus digunakan dalam kod atau hamparan. Alat ini menghurai markup <table> yang ditampal, membaca baris pengepala (daripada <thead>/<th>, atau <tr> pertama jika tiada <thead>), memetakan sel setiap baris seterusnya kepada pengepala tersebut, dan menghasilkan tatasusunan objek JSON atau fail CSV.

Ia juga berfungsi sebaliknya: tampal tatasusunan objek JSON atau teks CSV, dan alat ini menjana jadual HTML berstruktur dengan baik dengan <thead> untuk pengepala lajur dan <tbody> untuk baris data, sedia untuk ditampal ke dalam halaman web atau CMS.

Semuanya berjalan dengan DOMParser terbina dalam pelayar — tiada HTML dihantar ke pelayan, jadi selamat digunakan dengan kandungan yang ditampal termasuk data dalaman atau sensitif.

Sumber: struktur jadual mengikut definisi elemen jadual WHATWG HTML Living Standard.

Kenapa guna alat ini?

Penukaran dua hala — jadual HTML ke JSON, jadual HTML ke CSV, dan JSON/CSV semula kepada markup jadual HTML yang bersih.
Pengesanan pengepala automatik — berfungsi dengan markup <thead>/<th> atau <tr> pertama biasa yang digunakan sebagai baris pengepala.
Tiada perlu menampal ke dalam hamparan dahulu — terus daripada markup jadual kepada data berstruktur.
Menjana output HTML yang dielakkan dengan betul, supaya aksara khas seperti < dan & dalam data anda tidak merosakkan jadual.
100% sisi klien — HTML yang anda tampal (yang mungkin daripada halaman dalaman atau panel admin) tidak pernah meninggalkan pelayar anda.

Cara menggunakannya

Untuk menukar jadual HTML: tampal markup <table>...</table> ke dalam kotak pertama, kemudian klik "Convert to JSON" atau "Convert to CSV".
Semak output, kemudian salin atau klik pautan muat turun untuk menyimpan fail.
Untuk menjana jadual HTML: tampal tatasusunan JSON atau teks CSV ke dalam kotak kedua.
Klik "Convert to HTML table" dan salin markup yang dijana ke dalam halaman atau CMS anda.

Contoh

Input

<table><tr><th>name</th><th>age</th></tr><tr><td>Alice</td><td>30</td></tr></table>

Hasil

[{"name":"Alice","age":"30"}]

Sel baris pertama menjadi kunci objek; setiap baris seterusnya menjadi satu elemen tatasusunan dengan nilai diambil sebagai teks.

Petua praktikal

Mengekstrak data daripada jadual pada halaman web: lihat sumber halaman atau periksa elemen, salin markup <table>...</table>, dan tampal di sini dan bukannya menaip semula data secara manual.
Menerbitkan respons API sebagai jadual boleh dibaca pada laman atau dalam CMS: tampal tatasusunan JSON ke dalam kotak kedua dan salin HTML yang dijana terus ke dalam blok teks kaya atau HTML halaman anda.
Jika jadual menggunakan susun atur <div> atau grid CSS dan bukannya markup <table> sebenar, alat ini tidak dapat menghuraikannya — halaman sumber perlu menggunakan tag jadual HTML sebenar.

Mengapa pengesanan pengepala penting

Jadual tanpa baris pengepala yang jelas adalah samar — setiap alat hiliran perlu tahu baris mana yang mentakrifkan nama lajur sebelum ia boleh menukar baris yang tinggal menjadi rekod berstruktur. Alat ini menyelesaikan ketidakjelasan itu dengan cara pelayar dan kebanyakan pengikis melakukannya: ia mencari bahagian <thead> eksplisit dahulu, dan hanya kembali menganggap baris pertama kelihatan sebagai pengepala apabila tiada <thead> hadir. Ini mengekalkan penukaran boleh diramal walaupun untuk markup jadual tulisan tangan atau dikikis yang melangkau tag lebih semantik.

Soalan lazim

Adakah ia berfungsi dengan jadual yang tidak menggunakan <thead>?

Ya. Jika tiada <thead>, alat ini kembali menganggap <tr> pertama dalam jadual sebagai baris pengepala.

Apa yang berlaku jika satu baris mempunyai lebih sedikit sel berbanding baris pengepala?

Sel yang hilang untuk baris itu dibiarkan sebagai rentetan kosong dalam output JSON atau kosong dalam CSV, jadi struktur baris kekal utuh dan bukannya menyebabkan ralat.

Adakah tag bersarang dalam sel, seperti <b> atau <a>, dikekalkan?

Tidak — hanya kandungan teks kelihatan setiap sel diekstrak. Pemformatan sebaris, pautan, dan markup bersarang lain dalam sel dibuang, dan hanya teks biasa kekal.

Adakah HTML yang ditampal dihantar ke mana-mana?

Tidak. Penghuraian berlaku dengan DOMParser terbina dalam pelayar, sepenuhnya pada peranti anda — tiada apa dimuat naik ke pelayan.

Bolehkah saya round-trip tatasusunan JSON melalui alat ini kembali kepada jadual HTML?

Ya — tampal tatasusunan JSON (atau CSV) ke dalam kotak kedua dan klik "Convert to HTML table" untuk mendapatkan kembali markup <table> yang sah dan dielakkan dengan betul dengan kunci yang sama sebagai pengepala lajur.