Cara Membuat Delete dan Sorting Data pada Tabel Menggunakan bhs Javascript
Pertama: buat beberapa elemen penyusun
<div class="input">
<input class="nama" type="text" />
<input class="alamat" type="text" />
<input class="submit" type="submit" />
</div>
<table class="tabel">
<thead>
<tr>
<th>no</th>
<th>name</th>
<th>address</th>
<th>delete</th>
<th>up</th>
<th>down</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Kedua: Percantik dengan CSS
.tabel {
font-family:sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 1.4em;
font-style: normal;
border-collapse: separate;
width: 700px;
}
.tabel th {
padding: 10px;
color: #fff;
text-shadow:1px 1px 1px #568F23;
border: 1px solid #93CE37;
border-bottom: 3px solid #9ED292;
background-color: #9DD929;
background:-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.02, rgb(123,192,67)),
color-stop(0.51, rgb(139,198,66)),
color-stop(0.87, rgb(158,217,41))
);
background: -moz-linear-gradient(
center bottom,
rgb(123,192,67) 2%,
rgb(139,198,66) 51%,
rgb(158,217,41) 87%
);
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius:5px 5px 0px 0px;
border-top-left-radius:5px;
border-top-right-radius:5px;
}
.tabel tr {
color: #4D4D35;
font-size:12px;
text-align:center;
padding:10px 0px;
}
Ketiga: Javascript/JQuery untuk manipulasi sortir dan delete
function delData(obj){ // fungsi untuk delete
$(obj).parent().remove(); // ambil data di tabel dan hapus
reload_no_urut(); // fungsi untuk mengatur ulang nomor urut
}
function reload_no_urut() { // fungsi untuk mengatur ulang nomor urut
n=1;
$('.nomor').each(function(){ // mengambil setiap class nomor dan memberi nomor urut
($(this).text(n));
n++;
});
}
function uP(obj){ // fungsi action up
var data=($(obj).parent().text()); // ambil data pada tabel row hasilnya berbentuk list
var no=data[0]; // slicing list untuk mengambil nomor urut
var all_nama = []; // variabel untuk menampung data semua nama berbentuk list
var all_alamat = []; // variabel untuk menampung data semua alamat berbentuk list
if (Number(no) == 1) {
alert('data tidak bisa dipindah'); // kondisi jika data bernomor satu tidak bisa di pindah dan menampilkan alert
} else {
var before = Number(no) - 1; // ambil nomor urut sebelumnya
$('.nama').each(function(){ // ambil semua data pada class nama
all_nama.push($(this).text()); // memasukan data kedalam variabel all_nama
});
$('.alamat').each(function(){ // ambil semua data pada class alamat
all_alamat.push($(this).text()); // memasukan data kedalam variabel all_alamat
});
var prev_nama = all_nama[no]; // mengatur ulang list nama
all_nama[no] = all_nama[no-1];
all_nama[no-1] = prev_nama;
prev_alamat=all_alamat[no]; // mengatur ulang list alamat
all_alamat[no]=all_alamat[Number(no)-1];
all_alamat[Number(no)-1]=prev_alamat;
for (i=1;i<all_nama.length;i++) { // looping untuk memasukan data ke tabel html
$('td[nilai='+i+']').parent().remove();
$('.tabel').append("<tr><td class="nomor" nilai=""+i+"">"+i+"</td><td class="nama">"+all_nama[i]+"</td><td class="alamat">"+all_alamat[i]+"</td>" +
"<td onclick='delData(this);'>Delete</td><td onclick='uP(this)';>UP</td><td onclick='down(this)';>down</td> </tr>");
}
}
}
function down(obj){
all_nama=[]; // variabel untuk menampung nama
all_alamat=[]; // variabel untuk menampung alamat
var data=($(obj).parent().text()); // ambil data pada tabel row
var no=data[0]; // slicing data untuk mendapatkan nomor urut
$('.nama').each(function(){ // ambil semua data pada class nama
all_nama.push($(this).text()); // assignment ke variabel all_nama
});
$('.alamat').each(function(){ // ambil semua data pada class alamat
all_alamat.push($(this).text()); // assignment ke variabel all_alamat
});
if (no==((all_nama.length)-1)){ // kondisi jika data terletak paling akhir data tidak bisa dipindah
alert('tidak bisa di pindah');
}
else {
next_nama=all_nama[no]; // mengatur ulang data pada list
all_nama[no]=all_nama[Number(no)+1];
all_nama[Number(no)+1]=next_nama;
next_alamat=all_alamat[no]; // mengatur ulang data pada list
all_alamat[no]=all_alamat[Number(no)+1];
all_alamat[Number(no)+1]=next_alamat;
for (i=1;i<all_nama.length;i++) { // looping untuk memasukan data ke tabel html
$('td[nilai='+i+']').parent().remove();
$('.tabel').append("<tr><td class="nomor" nilai=""+i+"">"+i+"</td><td class="nama">"+all_nama[i]+"</td><td class="alamat">"+all_alamat[i]+"</td>" +
"<td onclick='delData(this);'>Delete</td><td onclick='uP(this);'>UP</td><td onclick='down(this)';>down</td> </tr>");
}
}
}
$(document).ready(function(){ // fungsi untuk mengambil data pada form dan memasukan ke tabel html
var no = 0;
$(".submit").click(function(){
var nama = $(".nama").val();
var alamat= $(".alamat").val();
no++;
$(".tabel").append("<tr><td class="nomor" nilai=""+no+"">"+no+"</td><td class="nama">"+nama+"</td><td class="alamat">"+alamat+"</td><td onclick='delData(this);'>Delete</td><td onclick='uP(this)';>UP</td><td onclick='down(this)';>down</td> </tr>");
$(".nama").val(''); // set ulang form agar kosong lagi setelah submit
$(".alamat").val(''); // set ulang form agar kosong lagi setelah submit
});
});
Silahkan Coba Sendiri...
Sumber
Title : Cara Membuat Delete dan Sorting Data pada Tabel Menggunakan bhs Javascript
Description : Cara Membuat Delete dan Sorting Data pada Tabel Menggunakan bhs Javascript DEMO DOWNLOAD Pertama: buat beberapa elemen penyusun ...