Saya ingin membuat beberapa sel tabel html dapat diedit, cukup klik dua kali sel, masukkan beberapa teks dan perubahan dapat dikirim ke server. Saya tidak ingin menggunakan beberapa toolkit seperti grid data dojo. Karena itu menyediakan beberapa fitur lainnya. Apakah Anda akan memberi saya beberapa cuplikan kode atau saran tentang cara menerapkannya?
sumber
contenteditable
div setiap kali Anda membuat yang baru<td>
. Jika tidak, seperti yang disebutkan di posting, Anda dapat menambahkancontenteditable
pada sel, baris, atau tabel.HTML5 mendukung konten yang dapat diedit,
Pengeditan pihak ketiga
Untuk mengutip entri mdn pada konten yang dapat diedit
sumber
true
, apapun namanya. Misalnya<td contenteditable='contenteditable'></td>
,.Saya memiliki tiga pendekatan, Di sini Anda dapat menggunakan keduanya
<input>
atau<textarea>
sesuai kebutuhan Anda.1. Gunakan Input in
<td>
.Menggunakan
<input>
elemen di semua<td>
,Selain itu, Anda mungkin ingin mengubah ukuran input menjadi ukurannya
td
. ex.,Anda juga dapat mengubah warna batas kotak input saat tidak sedang diedit.
2. Gunakan
contenteditable='true'
atribut. (HTML5)Namun, jika Anda ingin menggunakan
contenteditable='true'
, Anda mungkin juga ingin menyimpan nilai yang sesuai ke database. Anda dapat mencapai ini dengan ajax.Anda dapat melampirkan keyhandlers
keyup
,keydown
,keypress
dll untuk<td>
. Selain itu, sebaiknya gunakan beberapa penundaan () dengan kejadian tersebut ketika pengguna terus menerus mengetik, kejadian ajax tidak akan aktif dengan setiap tombol yang ditekan pengguna. sebagai contoh,3. Tambahkan
<input>
ke<td>
saat diklik.Tambahkan elemen input
td
ketika<td>
diklik, ganti nilainya sesuai dengantd
nilainya. Saat input kabur, ubah nilai `td dengan nilai input. Semua ini dengan javascript.sumber
contenteditable=true
bisakah Anda membantu saya dalam hal ini?Ini adalah contoh yang bisa dijalankan.
sumber
Anda dapat menggunakan x-editable https://vitalets.github.io/x-editable/ perpustakaannya yang luar biasa dari bootstrap
sumber
Coba kode ini.
Anda juga dapat mengunjungi tautan ini untuk lebih jelasnya:
sumber
Cukup masukkan
<input>
elemen<td>
secara dinamis, pada klik sel. Hanya HTML dan Javascript sederhana. Tidak perlu untukcontentEditable
,jquery
,HTML5
https://Jsfiddle.net/gsivanov/38tLqobw/2/
sumber
Saya menggunakan ini untuk bidang yang dapat diedit
sumber
Jika Anda menggunakan Jquery, plugin ini membantu Anda sederhana, tetapi bagus
https://github.com/samuelsantosdev/TableEdit
sumber
Ini adalah poin penting meskipun Anda tidak perlu membuat kode ini berantakan. Alih-alih Anda bisa mengulang semua
<td>
dan menambahkan<input>
dengan atribut dan akhirnya memasukkan nilai.sumber
ini sebenarnya sangat lurus ke depan, ini HTML saya, contoh jQuery .. dan berfungsi seperti pesona, saya membuat semua kode menggunakan sampel data json online. Bersulang
<< HTML >>
<< jQuery >>
sumber