HTML 5 data atribut (data-*) merupakan atribut baru yang terdapat pada HTML 5. Kemampuan utama atribut ini adalah untuk menyimpan nilai pada tag HTML sedangkan untuk mengakses nilai tersebut dapat menggunakan JavaScript (jQuery).
Sebagai contoh untuk mengakses nilai pada tag input harus menyertakan atribut value tetapi bagaimana dengan tag HTML yang tidak memiliki atribut value ?
Seperti tag table yang tidak memilik tag value lalu bagaimana cara untuk mengambil nilai pada baris atau kolom pada tag table tersebut ? Caranya adalah dengan menggunakan HTML 5 Data Atribut. Berikut adalah cara mulai dari menyimpan dan mengakses nilai menggunakan HTML 5 data atribut.
- Buat dokumen html.
-
Ketikkan kode program berikut:
<!DOCTYPE HTML> <html> <head> <title>Study On Sunday - HTML 5 Data Atribut</title> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script> /* Fungsi JS Dipanggil Ketika Baris Pada Tabel Diklik. */ function AmbilKode(objek){ /* Menggunakan Fungsi data() Pada JQuery. */ var data = $(objek).data("kode"); alert(data); } </script> </head> <body> <h1>Study On Sunday</h1> <table> <thead> <tr> <th>Kode</th> <th>Nama</th> <th>Alamat</th> </tr> </thead> <tbody> <tr onclick="AmbilKode(this)" data-kode="P1"> <td>P1</td> <td>Made</td> <td>Denpasar</td> </tr> <tr onclick="AmbilKode(this)" data-kode="P2"> <td>P2</td> <td>Subali</td> <td>Denpasar</td> </tr> <tr onclick="AmbilKode(this)" data-kode="P3"> <td>P1</td> <td>Ni Luh</td> <td>Tabanan</td> </tr> </tbody> </table> </body> </html> - Simpan dengan nama index.html.
Berikut adalah tampilan program, apabila baris pada tabel diklik akan menampilkan kotak pesan alert dengan pesan berupa nilai pada kolom "kode" pada baris tersebut.
Catatan:
Dalam menulis HTML 5 Data atribut harus didahului dengan keyword data- dan diikuti dengan inisial lain yang harus ditulis dengan huruf kecil, sebagai contoh:
data-id="" atau data-alamat="".
Apabila ada hal yang kurang dimengerti silahkan tanyakan melalui fasilitas komentar pad blog ini.
0 Comments:
Post a Comment