• Terbaru

    Menambah dan menghapus kolom tabel dengan Javascript

    Jika ingin menggunakan javascript untuk membuat tabel yang bisa di tambah dan di kurangi oleh client, cara kerjanya jadi misalkan di pilih tombol tambah kolom maka kolom tabel akan bertambah, jika di ceklist di kolom yang akan di hapus dan klik hapus kolom maka kolom yang di beri checklist akan di hapus. seperti di bawah :

    .
    Kolom1Kolom2Kolom3Kolom4
    .

    Kode tabel :
    <table id="tabel-update-part">
    <tbody>
    <tr>
    <th></th><th>Kolom1</th><th>Kolom2</th><th>Kolom3</th><th>Kolom4</th>
    </tr>
    <tr>
    <td><input name="chk" type="checkbox" /></td><td><input name="kol1[]" type="text" /></td><td><input name="kol2[]" type="text" /></td><td><input name="kol3[]" type="text" /></td><td><input name="kol4[]" type="text" /></td>
    </tr>
    </tbody></table>


    .
    Kode Tombol :
    <button class="button-tambah-hapus" onclick=" return tambahbaris('tabel-update-part')">Tambah Kolom</button>
           <button class="button-tambah-hapus" onclick="return hapusbaris('tabel-update-part')">Hapus Kolom</button>


    Kode Javascript :
    function tambahbaris(tabel){
      var tabel = document.getElementById("tabel-update-part");
      var bacabaris = tabel.rows.length;
      var bacakolom = tabel.rows[0].cells.length;
      var tambahbaris = tabel.insertRow(bacabaris);
      for(var i=0;i<bacakolom;i++){
       var cellbaru = tambahbaris.insertCell(i);
       var isicell = tabel.rows[1].cells[i].innerHTML;
       cellbaru.innerHTML=isicell;
      }
      return false;
     }
     function hapusbaris(tabel){
      var tabel = document.getElementById("tabel-update-part");
      var bacabaris = tabel.rows.length;
      for(var i=0;i<bacabaris;i++){
       //baca baris yang ke i
       var bacabarisyangke = tabel.rows[i];
       //baca ceklist di childnode cell ke 0
       var bacaceklist = bacabarisyangke.cells[0].childNodes[0];
       //jika ada ceklist
       if(null != bacaceklist && true == bacaceklist.checked){
        tabel.deleteRow(i);
        bacabaris--;
        i--;
       }
      }
      return false;
     } 


    Untuk membaca nilai dari input yang di lewatkan form dengan PHP dari tabel di atas silakan baca posting : Cara melewatkan 2 ID di post
    atau seperti kode berikut
    $nama = $_POST['nama'];
    $notelp = $_POST['notelp'];

    foreach ($nama as $array => $nilai) {
    # code...

    echo $nama[$array];
    echo $notelp[$array];
    echo "<br>";
    }

    5 comments:

    1. tks gan, walaupun gak bisa dicopas tapi masih bisa di CTRL+U :)
      makasih tutorial nya ini yg sedang sy cari2..

      ReplyDelete
    2. Wow, cool post. I'd like to write like this too - taking time and real hard work to make a great article... but I put things off too much and never seem to get started. Thanks though. kolpac

      ReplyDelete

    Saya sangat berterimakasih apabila sahabat sekalian bersedia untuk tidak meninggalkan spam dan meninggalkan komentar yang berhubungan dengan artikel di atas.