Manipulasi Elemen dengan jQuery
Manipulasi Elemen dengan jQuery - Manipulasi atau rekayasa elemen pada suatu tampilan website merupakan hal yang sudah biasa dan mungkin suatu hal yang sangat dibutuhkan, karena dengan adanya manipulasi atau rekaya terhadap elemen - elemen membuat tampilan website lebih interaktif, banyak sekali contoh manipulasi yang bisa kita lihat pada tampilan website sekarang misalnya nya saja manipulasi elemen teks, input teks dan masih banyak lagi. Nah, pada kesempatan kali ini saya akan bagikan tutorial sederhana yaitu Manipulasi Elemen dengan jQuery.
Pada kasus yang akan saya praktekan berikut ini, saya akan coba manipulasi teks menjadi elemen input teks yang juga bisa kita ubah nilai dari teksnya itu sendiri.
Langkah 1 : Manipulasi Elemen dengan jQuery
Kita mulai langkah pertama untuk manipulasi elemennya dengan membuat template sederhana dengan menggunakan framework bootstrap agar tampilan terlihat sedikit menarik.
<div class="container mt-3">
<div class="row">
<div class="col-md-6">
<h3>List Materi</h3>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Materi</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><label id="nama-materi">Javascript</label></td>
<td>
<button class="btn btn-sm btn-danger" id="btn-edit">Edit</button>
<button class="btn btn-sm btn-success" id="btn-save">Save</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Langkah 2 : Manipulasi Elemen dengan jQuery
Setelah membuat template seperti diatas, selanjutnya kita akan membuat fungsi untuk manipulasi elemennya, untuk itu kita akan memanfaatkan jQuery untuk menjalankan fungsi dari masing button. Silahkan ketikan sintak jQuery berikut dan jangan lupa load terlebih dahulu library jQuery nya.
$(document).ready(function() {
$('#btn-edit').click(function(){
var text = $('#nama-materi').text();
$('#nama-materi').html(`
<input type="text" class="form-control" value="${text}">
`);
})
$('#btn-save').click(function(){
var value = $('.form-control').val();
$('#nama-materi').text(value);
})
});
</script>
Setelah semua sintak telah diketikan, silahkan simpan filenya kemudian kalian bisa membuka pada browser masing - masing dan lihat hasilnya. Jika kalian klik tombol ubah maka elemen teks akan diubah menjadi elemen input beserta menampilkan nilainya sekaligus juga bisa menyimpan perubahan nilainya.
Baiklah cukup sekian tutorial sederhana mengenai Manipulasi Elemen dengan jQuery, semoga tutorial ini bisa bermanfaat sampai jumpa lagi pada tutorial selanjutnya dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
