Cara Menambahkan Row Pada Tabel Menggunakan Javascript -

Row pada tabel biasa disebut adalah baris baru tabel. Pada kasus kali ini saya akan membahas tentang cara menambahkan row pada tabel menggunakan javascript. Dalam artikel ini data yang ditampilkan dalam tabel belum terkoneksi kedalam database,jadi hanya data template saja.Baiklah sekarang kita mulai saja bagaimana cara membuatnya ,coba ikutin langkah-langkah berikut ini :

Sahabat bisa siapkan texteditor untuk membuat tabel yang berisi data sementara bisa mengetikan script berikut ini

 
 <!DOCTYPE html>
<html>
    <head>
        <title>Cara Menambah Baris Baru pada Table Menggunakan Javascript </title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
<body>
        
        Nama Lengkap: <input type="text" name="nama" id="nama" /><br/><br/>
        Paket Kursus: <input type="text" name="paket" id="paket" /><br/><br/>
        Waktu Kursus:  <input type="text" name="lama" id="lama" /><br/><br/>
        <button onclick="tambah();">Tambah Baris</button><br/><br/>

        <table border="1">
            
            <tr>
                <th>Nama Murid</th>
                <th>Paket Kursus</th>
                <th>Waktu Kursus(Bulan)</th>
            </tr>
            
            <tr>
                <td>Ando</td>
                <td>Design Grapish</td>
                <td>10</td>
            </tr>
            
             <tr>
                <td>Bannu</td>
                <td>Web Design</td>
                <td>5</td>
            </tr>
            
             <tr>
                <td>Chelsea</td>
                <td>Web Master</td>
                <td>9</td>
            </tr>
            
             <tr>
                <td>Dennies</td>
                <td>Web Programming</td>
                <td>15</td>
            </tr>
            
            
        </table>

    </body>

</html>

Jika sudah sahabat bisa menambahkan script dari Javascript kedalam HTML seperti dibawah ini

 <script>
            
            function tambah()
            {
                // untuk ambil nilai pada input
                var nama = document.getElementById('nama').value;
                 var paket = document.getElementById('paket').value;
                  var lama = document.getElementById('lama').value;
                  
                  
                  // 0 = baris awal pada tabel
                  var table = document.getElementsByTagName('table')[0];
                  
                  // tambah baris kosong pada tabel
                  // 0 = dihitung dari atas 
                  // table.rows.length = menambahkan pada akhir baris
                  // table.rows.length/2 = menambahkan data pada baris tengah tabel , urutan baris ke 2 
                  var newRow = table.insertRow(table.rows.length/2);
                  
                  // tambah cell pada baris baru
                  var cell1 = newRow.insertCell(0);
                  var cell2 = newRow.insertCell(1);
                  var cell3 = newRow.insertCell(2);
                  
                  // tambah nilai ke dalam cell
                  cell1.innerHTML = nama;
                  cell2.innerHTML = paket;
                  cell3.innerHTML = lama;
            }
            
        </script>

Sekarang sahabat bisa simpan filenya lalu coba jalankan pada browser masing-masing apakah sudah benar seperti tampilan dibawah ini:

Dan selanjutnya sahabat bisa input data pada form lalu klik tombol “tambah baris” ,lihat hasilnya dibawah ini:

Demikian pembahasan artikel kali ini tentang cara menambahkan row pada tabel menggunakan javascript, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya.

terima kasih

Cara Menambahkan Row Pada Tabel Menggunakan Javascript

Kategori