Javascript Bag. 7-2

Javascript String, Mengupgrade Mini Project Trayek

Pada Javascript Bagian Sebelumnya, Kita Sudah Membahas Tentang String Dan Membuat Mini Project, Untuk Bagian Ini Kita Akan Mengupgrade Mini Project Trayek Kita Dengan Menambahkan Menu "Action" Dan Menambahkan Fitur Hapus, Jika Anda Belum Membaca Part Sebelumnya, Klik Disini!

List Buah Interaktif

              <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Daftar Buah</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 10px;
        }

        h1 {
            text-align: center;
        }

        table {
            border-collapse: collapse;
            width: calc(100% - 20px); /* Menggunakan calc() untuk mempertahankan panjang tabel yang memenuhi layar setelah diterapkan margin */
            margin: 10px;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #007bff;
            color: white;
        }
    </style>
</head>
<body>
    <h1>Daftar Buah</h1>
    <div>
        <input id="namaInput" type="text" placeholder="Nama Buah">
        <br>
        <input id="jumlahInput" type="number" placeholder="Jumlah">
        <br>
        <input id="gambarInput" type="text" placeholder="URL Gambar">
        <br>
        <button onclick="addBuah()">Tambah Buah</button>
    </div>
    <div id="tableContainer">
        <table id="buahTable">
            <thead>
                <tr>
                    <th>Nama Buah</th>
                    <th>Jumlah</th>
                    <th>Gambar</th>
                    <th>Aksi</th>
                </tr>
            </thead>
            <tbody>
                <!-- Data buah akan ditambahkan di sini -->
            </tbody>
        </table>
    </div>

    <script>
      function addBuah() {
          var namaBuah = document.getElementById('namaInput').value.trim();
          var jumlahBuah = document.getElementById('jumlahInput').value.trim();
          var gambarBuah = document.getElementById('gambarInput').value.trim();
  
          if (namaBuah !== '' && jumlahBuah !== '' && gambarBuah !== '') {
              var table = document.getElementById('buahTable').getElementsByTagName('tbody')[0];
              var newRow = table.insertRow(-1);
              var cell1 = newRow.insertCell(0);
              var cell2 = newRow.insertCell(1);
              var cell3 = newRow.insertCell(2);
              var cell4 = newRow.insertCell(3);
  
              cell1.innerHTML = namaBuah;
              cell2.innerHTML = jumlahBuah;
              cell3.innerHTML = '<img src="' + gambarBuah + '" alt="' + namaBuah + '" style="width:100px;height:100px;">';
              cell4.innerHTML = '<button onclick="editBuah(this)">Edit</button> <button onclick="hapusBuah(this)">Hapus</button>';
  
              // Reset input fields
              document.getElementById('namaInput').value = '';
              document.getElementById('jumlahInput').value = '';
              document.getElementById('gambarInput').value = '';
          } else {
              alert('Silakan lengkapi semua input.');
          }
      }
  
      function editBuah(button) {
          var row = button.parentNode.parentNode;
          var namaBuah = row.cells[0].innerHTML;
          var jumlahBuah = row.cells[1].innerHTML;
          var gambarBuah = row.cells[2].querySelector('img').src;
  
          row.cells[0].innerHTML = '<input type="text" value="' + namaBuah + '">';
          row.cells[1].innerHTML = '<input type="number" value="' + jumlahBuah + '">';
          row.cells[2].innerHTML = '<input type="text" value="' + gambarBuah + '">';
          row.cells[3].innerHTML = '<button onclick="saveBuah(this)">Save</button>';
      }
  
      function saveBuah(button) {
          var row = button.parentNode.parentNode;
          var namaBuah = row.cells[0].querySelector('input').value;
          var jumlahBuah = row.cells[1].querySelector('input').value;
          var gambarBuah = row.cells[2].querySelector('input').value;
  
          row.cells[0].innerHTML = namaBuah;
          row.cells[1].innerHTML = jumlahBuah;
          row.cells[2].innerHTML = '<img src="' + gambarBuah + '" alt="' + namaBuah + '" style="width:100px;height:100px;">';
          row.cells[3].innerHTML = '<button onclick="editBuah(this)">Edit</button> <button onclick="hapusBuah(this)">Hapus</button>';
      }
  
      function hapusBuah(button) {
          var row = button.parentNode.parentNode;
          row.parentNode.removeChild(row);
      }
  </script>
  
</body>
</html>

addBuah(): Fungsi ini dipanggil ketika tombol "Tambah Buah" ditekan. Ia mengambil nilai dari input, membuat baris baru dalam tabel, dan memasukkan nilai-nilai tersebut ke dalam sel-sel baris baru tersebut.
editBuah(button): Fungsi ini memungkinkan pengguna untuk mengedit entri buah. Ketika tombol "Edit" ditekan, baris tabel diganti dengan input field sehingga pengguna dapat mengubah nilainya.
saveBuah(button): Fungsi ini digunakan untuk menyimpan perubahan yang dilakukan oleh pengguna setelah mengedit entri buah. Ketika tombol "Save" ditekan, nilai-nilai input diambil dan dimasukkan kembali ke dalam sel-sel tabel.
hapusBuah(button): Fungsi ini memungkinkan pengguna untuk menghapus entri buah. Ketika tombol "Hapus" ditekan, baris tabel yang terkait akan dihapus dari tabel.

Kode JavaScript ini memanfaatkan konsep DOM (Document Object Model) untuk memanipulasi elemen-elemen HTML di halaman web secara dinamis. Dengan demikian, pengguna dapat menambah, mengedit, dan menghapus entri buah tanpa memuat ulang halaman.

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 7-2: String, Mengupgrade Mini Project Trayek.

Javascript Bag. 7-2

Javascript String, Mengupgrade Mini Project Trayek

List Buah Interaktif

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Data Analytic dan Machine Learning

Simple Sunset Links Page Design - HTML & CSS Only

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator