Create, Update dan Delete Data Master Dengan Ajax Dan Dynamic Grid

/* variable "editState" akan digunakan sebagai penanda bahwa ada data yang sedang diedit 
   jadi user tidak bisa menekan tombol edit pada masing-masing baris atau menambah data
   apabila form edit sedang ditampilkan */
var editState = false 
function newData(){
if(!editState){
	$('#tableFoot').show();
}else{
	alert('Tidak bisa menambah baris ketika mengedit baris');
}
}
function editData(ID){
if(!editState){
   var element = '#tr'+ID; // ambil ID dari baris yang ingin diubah
   // isi dari form disisipkan di posisi setelah baris element yang ingin diedit
   $($('#tableFoot').html()).insertAfter(element); 
   // kosongkan form tambah data agar tidak terjadi redudansi data yang dikirimkan
   $('#tableFoot').empty(); 
   $('input[@name=ID]').val(ID); // masukan ID dari record yang ingin diedit di form ID
   $('input[@name=NIP]').val($(element+' td:nth-child(2)').text()); // isi inputan NIP diambil dari kolom kedua pada baris yang ingin diedit
   $('input[@name=Name]').val($(element+' td:nth-child(3)').text());  // isi inputan Nama diambil dari kolom ketiga pada baris yang ingin diedit, dst
   $('textarea[@name=Address]').val($(element+' td:nth-child(4)').text()); 
 
   $('select[name=Department] option[value='+$('#dept_id'+ID).val()+']').attr('selected',true);
   $(element).hide(); // sembunyikan baris data yang ingin diedit
   editState = true; // set aplikasi ke keadaan sedang mengedit suatu baris
}else{
   alert('Anda sedang melakukan edit data, tekan button cancel sebelum melakukan edit pada baris ini');
}
}
function cancelForm(){
// action cancel pada saat mengedit beda perlakuannya dengan pada saat menambah data
if(editState){ 
	var element = $('#tr'+$('input[@name=ID]').val());
 
   /* ketika mengedit data, baris ini di sembunyikan dan diganti oleh form ubah data 
	  oleh karena itu sebelum mengubah isi dari kolom data di baris ini, anda harus
	  menampilkan kembali baris tsb dan menghapus baris form data */
	element.show(); 
	var html = '<tr>'+element.next().html()+'</tr>';
	$('#tableFoot').html(html); // form pada bagian bawah diisi lagi kode HTML-nya dari form edit
	element.next().remove();
	editState = false;
}else{
	$('#tableFoot').hide();
}
$('input[@name=ID]').val('');
$('input[@name=NIP]').val('');
$('input[@name=Name]').val('');
$('textarea[@name=Address]').val('');
$('select[name=Department] option').removeAttr('selected');
}