Module 5

 Project 5

 • Buatlah halaman HTML

 • Halaman terdiri dari table dengan form tambah data di atasnya.

 • Jika data ditambah, maka tambahkan di akhir table dengan penomoran yang sesuai. 

 • Jika berat lebih dari 5kg, gunakan backgruond color merah. 

 • Tombol hapus digunakan untuk menghapus baris yang bersangkutan  

berikut ini adalah caranya:

Kode HTML nya :

<!-- Table untuk memperlihatkan  data -->

<table id="dataTable">

    <thead>

        <tr>

            <th>No</th>

            <th>Nama Buah</th>

            <th>Berat (kg)</th>

            <th>Action</th>

        </tr>

    </thead>

    <tbody>

        <!-- Data akan ditambahkan di sini -->

    </tbody>

</table>

kode CSS nya :

table {

            border-collapse: separate;

            width: 80%;

            margin: 20px auto;

           

        }

        th, td {

            border: 1px solid black;

            padding: 8px;

            text-align: left;

        }

        tr.red-bg td:nth-child(3) {

            background-color: red;

        }

        #dataForm {

            text-align: center;

            margin-top: 20px;

        }

Kode Javascriptnya :

// project 5

    function addData() {

    // Mendapatkan nilai input dari form

                var itemName = document.getElementById('itemName').value;

                var itemWeight = parseInt(document.getElementById('itemWeight').value);

   

                // Mendapatkan elemen tbody dari tabel

                var tableBody = document.querySelector('#dataTable tbody');

   

                // Membuat baris baru

                var newRow = document.createElement('tr');

   

                // Menambahkan nomor urut (No) pada baris

                var rowCount = tableBody.rows.length + 1;

                newRow.innerHTML = '<td>' + rowCount + '</td>';

               

                // Menambahkan nama barang dan berat pada baris

                newRow.innerHTML += '<td>' + itemName + '</td>';

   

                // Menandai baris dengan background merah jika berat lebih dari 5kg

                if (itemWeight > 5) {

                    newRow.innerHTML += '<td>' + itemWeight + '</td>';

                    newRow.classList.add('red-bg');

                } else {

                    newRow.innerHTML += '<td>' + itemWeight + '</td>';

                }

   

                // Menambahkan tombol hapus pada baris

                newRow.innerHTML += '<td><button type="button" onclick="deleteRow(this)">Hapus</button></td>';

   

                // Menambahkan baris ke dalam tbody

                tableBody.appendChild(newRow);

   

                // Mengosongkan nilai input setelah ditambahkan

                document.getElementById('itemName').value = '';

                document.getElementById('itemWeight').value = '';

            }

   

            function deleteRow(button) {

                // Mendapatkan baris yang berisi tombol yang diklik

                var row = button.parentNode.parentNode;

   

                // Menghapus baris dari tabel

                row.parentNode.removeChild(row);

            }

Dan inilah hasilnya :

SEE YOU DI NEXT PROJECT