Untitled


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mini Project 5</title>
    <link rel="stylesheet" type="text/css" href="miniProject5.css">
    <link rel="stylesheet" type="text/css" href="fontawesome/css/all.min.css">
</head>
<body onload="ambilData()">
    <div id="myForm">
    <table>
        <h1>Form Inventory Buah</h1>

        <tr>
            <td>Nama Buah</td>
            <td><input type="text" name="nama" id="nama" placeholder="Nama Buah"></td>
        </tr>
        <tr>
            <td>Berat</td>
            <td><input type="number" name="berat" id="berat" placeholder="Berat"></td>
        </tr>
        <tr>
            <td colspan="2"><button type="button" class="button" onclick="addData()"><i class="fa fa-save"></i> Simpan</button>&nbsp;<button type="button" class="refresh" onclick="refresh()"><i class="fa fa-lock"></i> Refresh</button></td>
        </tr>
        <tr>
            <td colspan="2"><div id="msg"></div></td>
        </tr>
    </table>
    </div>
    <table id="tbl">
        <tr>
            <th>No</th>
            <th width="250">Nama Buah</th>
            <th width="150">Berat</th>
            <th width="150">Action</th>
        </tr>
    </table>
    <script>
        var tbl = document.getElementById('tbl');
        var tr = tbl.getElementsByTagName('tr');

        function addRecordFirst(baris, isi) {
            var kolom = document.createElement('td');
            var data = document.createTextNode(isi);
            kolom.setAttribute('class', 'nomor');
            kolom.appendChild(data);
            baris.appendChild(kolom);
        }
        function addRecordLast(baris, isi) {
            var kolom = document.createElement('td');
            var data = document.createTextNode(isi);
            kolom.appendChild(data);
            kolom.setAttribute("align", "center");
            baris.appendChild(kolom);
        }
        function addRecordRed(baris, isi) {
            var kolom = document.createElement('td');
            var data = document.createTextNode(isi);
            kolom.style.backgroundColor = "red";
            kolom.style.color = "white";
            kolom.appendChild(data);
            kolom.setAttribute("align", "center");
            baris.appendChild(kolom);
        }
        function addButton(parent, param, nilai) {
            var kolom = document.createElement('td');
            var btn = document.createElement('button');
            var valdata = document.createTextNode(param);
            btn.setAttribute('onclick', "hapus("+nilai+")");
            btn.setAttribute("class", "btn");
            kolom.setAttribute("align", "center");

            btn.appendChild(valdata);

            kolom.append(btn);
            parent.appendChild(kolom);
        }
        function addData() {
            // ambilData();
            var nama    = document.getElementById('nama').value;
            var berat   = document.getElementById('berat').value;
            if(nama == "" && berat == ""){
                alert('Nama dan Berat tidak boleh kosong.');
            } else if(nama == ""){
                alert('Nama tidak boleh kosong');
            } else if(berat == ""){
                alert('Berat tidak boleh kosong');
            } else {
                var baris   = document.createElement('tr');
                baris.setAttribute('id','idKolom['+ambilData()+']');
                tbl.appendChild(baris);

                // tambahkan nomor, nama buah dan berat
                var cekRecord = ambilData();
                var nomor = 0;
                if(cekRecord == 0){
                    var nomor = 0;
                } else {
                    var nomor = cekRecord - 1;
                }
                addRecordFirst(baris,nomor);
                addRecordLast(baris,nama);
                if(berat > 5){
                    addRecordRed(baris, berat + " Kg");
                } else {
                    addRecordLast(baris, berat + " Kg");
                }
                 addButton(baris, "Hapus", nomor);
                // Kosongkan value setelah melakukan penyimpanan
                document.getElementById('nama').value = "";
                document.getElementById('berat').value = "";
                document.getElementById('msg').innerHTML = "<p>Anda baru saja menyimpan 1 data.</p>";
            }
        }
        function ambilData() {
            return tr.length;
        }
        function hapus(param) {
            // ambilData();
            var main = document.getElementById('idKolom['+param+']');
            // main.style.display = "none";
            main.outerHTML = "";
            // updateNomor;
            var nmr = tbl.querySelectorAll("td.nomor");
            var total = nmr.length;
            var no = 0;
            var number = 1;
            while(number <= total) {
                nmr[no].innerHTML = number;
                number++;
                no++;
            }
        }
        function refresh() {
            location.reload();
        }

    </script>
</body>
</html>