Memasukkan elemen setelah elemen dalam jQuery

.insertafter

Adalah satu metode jQuery yang digunakan untuk memasukkan elemen setelah elemen dalam jQuery.

Syntax:

$(elemen).insertAfter(‘selector’)

Keterangan:

  • elemen disini adalah skrip html apa saja yang ingin kamu masukkan setelah elemen yang selectornya sesuai.

Contoh Kasus:

Saya mempunyai form tambah cuti seperti gambar dibawah ini:

Kode yang sudah dibuat:

<form name=”new_leave”>

<table width=”500″ border=”1″ id=’tb_leave’>

<tr id=’first’><td><div class=’kiri’>Leave Type</div>

<select name=”ltr_leavetype” >

<option value=’0′>_______Leave Type________</option>

<option value=’1′>ANNUAL</option>

<option value=’2′>SICK</option>

<option value=’3′>Maternity</option>

</select></td></tr>

<tr>

<td><div class=’kiri’>Start Date</div>    <input type=”text” name=”ltr_dtstart” id=”ltr_dtstart”></td>

</tr>

<tr>

<td><div class=’kiri’>End Date</div>    <input type=”text” name=”ltr_dtend” id=”ltr_dtend” >

</td></tr>  <tr>

<td>

<div class=’kiri’>Duration</div><input type=”text” name=”ltr_duration” id=”ltr_duration”></td>

</tr></table>

Permintaan Klien:

Kalo saya memilih Leave Type=Annual maka akan tampil pilihan tipe dari cuti Annual tersebut dan jika saya memilih Leave Type selain Annual maka pilihan tipe cuti untuk Annual tidak akan tampil seperti terlihat pada gambar dibawah ini:

Gambar jika saya memilih tipe cuti ANNUAL

Keterangan:

  • Lihat bagian yang diberi warna, bagian ini muncul kalau saya memilih tipe cuti  ANNUAL

Gambar jika saya memilih tipe cuti selain ANNUAL

Pertanyaan:

Bagaimana cara memasukkan Leave TranType  setelah Leave Type dan sebelum Start Date … ?

Jawaban:

Pertama saya berikan event onChange pada Leave Type seperti terlihat pada kode dibawah ini:

<select name=”ltr_leavetype” onChange=’tampilkan_tipe_annual()’>

Keterangan:

  • onChange=’tampilkan_tipe_annual()’, kode ini berarti jika kita melakukan perubahan pada pilihan Leave Type maka eksekusi fungsi tampilkan_tipe_annual().

Pembuatan Fungsi JavaScript

<script type=’text/javascript’>

function tampilkan_tipe_annual(){

$index=document.new_leave.ltr_leavetype.selectedIndex;

if($index==1){

var isi=”<tr id=’ltt_trantype’><td><div class=’kiri’>Leave TranType</div><select name=’ltr_leavetrantype’>”

isi+=”<option value=”1″>Auto Quota Addition</option>”

isi+=”<option value=”2″>Carry Forward</option>”

isi+=”<option value=”3″>Expired Quota</option>”

isi+=”</select></td></tr>”;

$(isi).insertAfter(‘#first’);

}

}

</script>

Keterangan:

  • document.new_leave.ltr_leavetype.selectedIndex, Kode ini digunakan untuk mengambil index dari elemen name=’ltr_leavetype’.
  • if($index==1), kode ini berarti jika indexnya == 1, dimana index satu ini berisi pilihan ANNUAL.
  • $(isi).insertAfter(‘#first’), Kode ini berarti saya memasukkan isi dari variabel isi setelah elemen  yang mempunyai id=’first’.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *