Menghapus Table Row Menggunakan jQuery

Tutorial berikut adalah mengenai cara menghapus table row menggunakan jQuery. Table dalam html berarti sekumpulan kode html yang membentuk sebuah baris data yang berisi beragam informasi yang dikemas sedemikian rupa, diawali dengan tag <table> dan diakhiri dengan tag </table>. Table merupakan sebuah cara untuk menampilkan informasi dalam bentuk cell yang terdiri atas baris dan kolom.

Table memiliki beberapa bagian yaitu row (baris) dan cell (bagian). Row (baris) didefinisikan dengan tag <tr>, sedangkan cell (bagian) didefinisikan dengan tag <td>.

Kembali ke topik, berikut akan diperlihatkan demo mengenai cara menghapus table row menggunakan jQuery:

Sebelumnya, untuk menggunakan jQuery kita perlu menginstallnya terlebih dahulu. Cukup letakkan kode berikut kedalam tag <head> blog anda. Jika sudah ada, maka dapat melewatkan langkah ini.
Kode :
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

Demo Original :

No Nama Siswa Alamat Jurusan Action
1 Imam Cirebon IPA Delete
2 Jaiman Kebumen IPS Delete
3 Karim Tegal IPS Delete
4 Mulyana Ciamis Bahasa Delete
5 Maulana Jakarta Bahasa Delete
6 Ido Angga Surabaya IPS Delete

jQuery Code :
$(document).ready(function(){
	$(function(){
		$('.demo a.del').click(function(e){
				$(e.target).closest( 'tr' ).remove();
				return false;
			});
		});
});

Menggunakan animasi fadeOut(); :

No Nama Siswa Alamat Jurusan Action
1 Imam Cirebon IPA Delete
2 Jaiman Kebumen IPS Delete
3 Karim Tegal IPS Delete
4 Mulyana Ciamis Bahasa Delete
5 Maulana Jakarta Bahasa Delete
6 Ido Angga Surabaya IPS Delete

jQuery Code :
$(document).ready(function(){
	$(function(){
		$('#demo a.del').click(function(e){
			$(e.target).closest( 'tr' ).css("background-color","pink");
			$(e.target).closest( 'tr' ).fadeOut();
			return false;
		});
	});
});

Selengkapnya kode dapat di download disini [Download Source Code] [Size:32 KB]

Baca Juga :

Older Post
Newer Post