Scribd Logo
Unggah

Selamat datang di Scribd!

  • Berlatih Menambah Data

    Diunggah oleh

    nardie
    5 tayangan3 halaman
    crud untuk tambah data

    Judul Asli

    berlatih menambah data

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    crud untuk tambah data

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan3 halaman

    Berlatih Menambah Data

    Diunggah oleh

    nardie
    crud untuk tambah data

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Berlatiha Menambah Data

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title> CRUD Javascript</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-10 offset-1">
    <h2>Crud JS</h2>
    <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
    <input type="text" id="add-name" placeholder="New Book">
    <input type="submit" value="Add">
    </form>

    </div>

    <p id="counter"></p>

    <table class="table-responsive">
    <tr>
    <th>Name</th>
    <th>Action</th>
    </tr>
    <tbody id="kota">
    </tbody>
    </table>
    </div>
    </div>
    </div>
    </body>
    </html>

    Jalankan jika tidak ada error lanjut dengan menambahkan script berikut sebelum penutup bodi

    </body>, script sebagai berikut

    <script>
    var app = new function() {
    this.el = document.getElementById('kota');
    this.kota = ['Jakarta', 'Surabaya', 'Bandung', 'Maksar', 'Banten', 'Bogor', 'Semarang',
    'Medan', 'Jayapura'];
    this.Count = function(data) {
    var el = document.getElementById('counter');
    var name = 'kota';
    if (data) {
    if (data > 1) {
    name = '<b>kota</b>';
    }
    el.innerHTML = data + '' + name ;
    } else {
    el.innerHTML = 'No' + name;
    }
    };

    this.FetchAll = function() {
    var data = '';
    if (this.kota.length > 0) {
    for (i = 0; i < this.kota.length; i++) {
    data += '<tr>';
    data += '<td>' + this.kota[i] + '</td>';
    data += '<td><button class="btn btn-danger" onclick="app.Delete(' + i
    + ')">Delete</button></td>';
    data += '</tr>';
    }
    }
    this.Count(this.kota.length);
    return this.el.innerHTML = data;
    };
    this.Add = function () {
    el = document.getElementById('add-name');
    var country = el.value;
    if (country) {
    this.kota.push(country.trim());
    el.value = '';
    this.FetchAll();
    }
    };
    this.Delete = function (item) {
    this.kota.splice(item, 1);
    this.FetchAll();
    };

    }
    app.FetchAll();
    function CloseInput() {
    document.getElementById('spoiler').style.display = 'none';
    }
    </script>
    Jika tidak ada error program dijalankan akan muncul

    Anda mungkin juga menyukai