Cara Membuat Inline Editing dengan jquery ( how to make inline editing with jquery)
Selamat siang , kali ini Mudah-loh.blogspot.com
akan membahas tentang Cara Membuat Inline Editing dengan jquery.
Inline Editing yang di maksud itu yang seperti
Seperti Contoh di atas ketika anda mengeklik edit maka data akan berubah menjadi input
Dan tombol ubah ganti dengan Update .
Konsep Cara Membuat Inline Editing dengan jquery
Yaitu ketika kita klik ubah , Data pada tabel akan di ganti dengan Input yang berisi data ,
Jadi kita buat 2 buah file data yang satu biasa , dan yang satu dalam input dan Tombol ubah ,
Digantikan oleh Update dengan funsi hide and Show pada Jquery.
Jadi anda dapat langsung menggantinya , setelah itu klik tombol Update .
Sudah mudeng kan dengan konsep Cara Membuat Inline Editing dengan jquery.
sekarang kita buat scriptnya oke ,
Oh iya pastikan anda telah mendownload file Jquery , bisa download di jquery.com
Sekian Cara Membuat Inline Editing dengan jquery semoga bermanfaat.
Selamat siang , kali ini Mudah-loh.blogspot.com
akan membahas tentang Cara Membuat Inline Editing dengan jquery.
Inline Editing yang di maksud itu yang seperti
 |
| Inline editing with Jquery |
Dan tombol ubah ganti dengan Update .
Konsep Cara Membuat Inline Editing dengan jquery
Yaitu ketika kita klik ubah , Data pada tabel akan di ganti dengan Input yang berisi data ,
Jadi kita buat 2 buah file data yang satu biasa , dan yang satu dalam input dan Tombol ubah ,
Digantikan oleh Update dengan funsi hide and Show pada Jquery.
Jadi anda dapat langsung menggantinya , setelah itu klik tombol Update .
Sudah mudeng kan dengan konsep Cara Membuat Inline Editing dengan jquery.
sekarang kita buat scriptnya oke ,
<?phpSetelah itu taruh file Cara Membuat Inline Editing dengan jquery di bawah dalam 1 file.
include('../koneksi.php');
//tampilkan ke halaman
$i=1;
$tmpl=mysql_query("SELECT * FROM tbl_tambah ");
?>
<div>
<table id="urutkan" style="border:2px #ccc">
<thead><tr>
<th>ID</th>
<th>Nama</th>
<th>Nomer</a></th>
<th>Pengaturan</th></tr>
<tbody><?php
while($row=mysql_fetch_assoc($tmpl)){
?><form id="formnya<?php echo $row['id_pelanggan']; ?>" action="<?php echo$link;?>code/ubah_langganan.php" method="post">
<td><?php echo "$i"; ?>
<input name="id_pelanggan" type="hidden" id="id<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['id_pelanggan']; ?>">
</td>
<td><p id="tampilnama<?php echo $row['id_pelanggan']; ?>"><?php echo $row['nama']; ?></p>
<input style="display:none;" name="nama" type="text" id="nama<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['nama']; ?>">
</td>
<td >
<p id="tampilnomerlang<?php echo $row['id_pelanggan']; ?>"><?php echo substr($row[nomerlang],0,9);?>xxx</p>
<input style="display:none;" name="nomerlang" type="text" id="nomerlang<?php echo $row['id_pelanggan']; ?>" value="<?php echo $row['nomerlang']; ?>">
</td>
<td>
<a id="ubah<?php echo $row['id_pelanggan']; ?>"><button type="button"><span></span>Ubah</button></a>
<a style="display:none;" id="btn_ubah<?php echo $row['id_pelanggan']; ?>"><button type="submit"><span></span>Update</button></a>
<a href="../code/delete.php?id_pelanggan=<?php echo $row['id_pelanggan']; ?>"><button><span></span>Hapus</button></a>
</td>
</form>
</tr>
<script>
$(document).ready(function(){
$("#ubah<?php echo $row['id_pelanggan']; ?>").click(function(){
$("#tampilnama<?php echo $row['id_pelanggan']; ?>").hide();
$("#tampilnomerlang<?php echo $row['id_pelanggan']; ?>").hide();
$("#ubah<?php echo $row['id_pelanggan']; ?>").hide();
$("#btn_ubah<?php echo $row['id_pelanggan']; ?>").show();
$("#nama<?php echo $row['id_pelanggan']; ?>").show();
$("#nomerlang<?php echo $row['id_pelanggan']; ?>").show();
});
$("tbody").mouseover(function(){
$("#btn_ubah<?php echo $row['id_pelanggan']; ?>").hide();
$("#nama<?php echo $row['id_pelanggan']; ?>").hide();
$("#nomerlang<?php echo $row['id_pelanggan']; ?>").hide();
$("#tampilnama<?php echo $row['id_pelanggan']; ?>").show();
$("#tampilnomerlang<?php echo $row['id_pelanggan']; ?>").show();
$("#ubah<?php echo $row['id_pelanggan']; ?>").show();
});
});
</script>
<?php
$i++;}?>
</tbody></table>
Oh iya pastikan anda telah mendownload file Jquery , bisa download di jquery.com
Sekian Cara Membuat Inline Editing dengan jquery semoga bermanfaat.