PROJECT SEDERHANA JAVASCRIPT #6 MODUL 5

 

Product Inventory Management Web Page

1. 1)Form Tambah Data:

   • Terdapat sebuah formulir dengan dua input (Nama Barang dan Berat) dan sebuah tombol "Tambah Data".
   • Tombol "Tambah Data" memanggil fungsi tambahData() saat diklik.

2. 2)Tabel Data Barang:

   • Terdapat tabel yang menampilkan data barang yang telah ditambahkan.
   • Setiap baris tabel mencakup nomor, nama barang, berat, dan tombol "Hapus" untuk setiap item.
   • Jika berat lebih dari 5 kg, sel berat akan ditandai dengan latar belakang merah (class highlight).

3. 3)JavaScript Functions:

   • tambahData(): Mengambil nilai input, menentukan latar belakang merah jika berat lebih dari 5 kg, dan menambahkan baris baru ke dalam tabel.
   • hapusBaris(row): Menghapus baris yang dipilih dari tabel dan memperbarui nomor urut setiap baris.

4. 4)Event Handling:

   • Tombol "Tambah Data" memanggil fungsi tambahData() saat diklik.
   • Tombol "Hapus" di setiap baris tabel memanggil fungsi hapusBaris(row) untuk menghapus baris tersebut.

Halaman ini memberikan fungsionalitas sederhana untuk manajemen inventaris barang dengan kemampuan penambahan dan penghapusan data.

PREVIEW AND SOURCE CODE:

https://github.com/2ndmurphy/Dynamic-Data-Entry-and-Display-with-Highlighting-Feature