Aplikasi Pencatatan Data Buah dengan Tabel Dinamis

Aplikasi Pencatatan Data Buah dengan Tabel Dinamis menggunakan JavaScript 

Fitur Utama:

1. Formulir input memungkinkan pengguna memasukkan nama buah dan berat.
2. Data yang dimasukkan ditampilkan secara dinamis dalam tabel.
3. Tabel memberikan penanda latar merah untuk buah dengan berat lebih dari 5kg.
4. Setiap baris tabel dilengkapi dengan tombol "Hapus" untuk menghapus entri data.

Instruksi Pengguna:

1. Isi formulir dengan nama buah dan berat.
2. Klik tombol "Tambah Data" untuk menambahkan entri ke dalam tabel.
3. Tabel akan memberikan penanda latar merah jika berat buah lebih dari 5kg.
4. Gunakan tombol "Hapus" pada setiap baris untuk menghapus entri data.

Kode html:

    <form id="dataForm">

        <label for="itemName">Nama Buah:</label>

        <input type="text" id="itemName" name="itemName" required>

   

        <label for="itemWeight">Berat:</label>

        <input type="number" id="itemWeight" name="itemWeight" min="0" required>

   

        <button type="button" onclick="addData()">Tambah Data</button>

    </form>

    <!-- Table untuk menampilkan 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 pada JS:

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

}

output: