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.

<body>
    <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.

<script>
    $(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.

Manipulasi Elemen dengan jQuery

Baiklah cukup sekian tutorial sederhana mengenai Manipulasi Elemen dengan jQuery, semoga tutorial ini bisa bermanfaat sampai jumpa lagi pada tutorial selanjutnya dan selamat mencoba :)

20 Agustus 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat