-->

K.E ^_~ Yang lagi galau ini penawarnya link

Delete dan Sorting Data pada Tabel dengan Javascript

im backkk...oke kali ini ane mau share code latihan javascript ane :hammer

oke langsung aja



Untuk keterangan lihat komentar yang sudah ane sertakan dalam script.

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
            });
        });


Sekian dari ane, maaf kalo kodingnya berantakan, maklum ane masih belajar :D

comment 2 komentar

Catatan:
Seluruh komentar yang masuk akan dimoderasi terlebih dahulu. Komentar yang berbau spam, kasar, menghina, seluruhnya yang bersifat menghancurkan bukan membangun tidak akan ditampilkan. Silahkan bertanya dan memberi pendapat dengan sopan dan sesuai aturan.

Anda diperbolehkan mempublikasikan ulang artikel ini, dengan syarat:
1. Mintalah izin dengan cara berkomentar di bawah artikel ini
2. Wajib menyertakan link ke artikel ini dan menyertakan nama penulis

 
© Klikedukasi 2008 - 2013 | Design by Panembahan Satyapradana | 170p3x