STEP 1

Langkah pertama yang harus dilakukan yaitu copy script html dibawah ini, lalu simpan file dengan nama "index.html"
<!DOCTYPE html>
<html>
<head>
<title>
Coding Rebahan Coding   
</title>
</head>
<body>
<table>
<tr>
<td>
<form onsubmit="event.preventDefault();onFormSubmit();" autocomplete="off">
<div>
<label>NPM</label>
<label id="fullNameValidationError"></label>
<br>
<input type="text" name="npm" id="npm">
</div>
<div>
<label>Nama</label><br>
<input type="text" name="nama" id="nama">
</div>
<div>
<label>Alamat Blog</label><br>
<input type="text" name="blog" id="blog">
</div>
<input type="submit" value="Submit">
</div>
</form>
</td> 
<table border="1" cellpadding="10px"  id="employeeList">
<br><br>
<thead>
<tr>
<th>NPM</th>
<th>nama</th>
<th>Alamat Blog</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</td>
</tr>
</table>
<script src="fungsi.js"></script>
</body>
</html>


HASILNYA:

STEP 2

lalu membuat file baru untuk membuat printah javascriptnya, copy script dibawah ini, lalu simpan dengan nama file "fungsi.js"

var selectedRow = null

function onFormSubmit() {
    if (validate()) {
        var formData = readFormData();
        if (selectedRow == null)
            insertNewRecord(formData);
        else
            updateRecord(formData);
        resetForm();
    }
}

function readFormData() {
    var formData = {};
    formData["npm"] = document.getElementById("npm").value;
    formData["nama"] = document.getElementById("nama").value;
    formData["blog"] = document.getElementById("blog").value;
    return formData;
}

function insertNewRecord(data) {
    var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    cell1 = newRow.insertCell(0);
    cell1.innerHTML = data.npm;
    cell2 = newRow.insertCell(1);
    cell2.innerHTML = data.nama;
    cell3 = newRow.insertCell(2);
    cell3.innerHTML = data.blog;
    cell4 = newRow.insertCell(3);
    cell4.innerHTML = `<a onClick="onEdit(this)">Edit</a>
                       <a onClick="onDelete(this)">Delete</a>`;
}

function resetForm() {
    document.getElementById("npm").value = "";
    document.getElementById("nama").value = "";
    document.getElementById("blog").value = "";
    selectedRow = null;
}

function onEdit(td) {
    selectedRow = td.parentElement.parentElement;
    document.getElementById("npm").value = selectedRow.cells[0].innerHTML;
    document.getElementById("nama").value = selectedRow.cells[1].innerHTML;
    document.getElementById("blog").value = selectedRow.cells[2].innerHTML;
}
function updateRecord(formData) {
    selectedRow.cells[0].innerHTML = formData.npm;
    selectedRow.cells[1].innerHTML = formData.nama;
    selectedRow.cells[2].innerHTML = formData.blog;
}

function onDelete(td) {
    if (confirm('Are you sure to delete this record ?')) {
        row = td.parentElement.parentElement;
        document.getElementById("employeeList").deleteRow(row.rowIndex);
        resetForm();
    }
}
function validate() {
    isValid = true;
    if (document.getElementById("npm").value == "") {
        isValid = false;
        document.getElementById("fullNameValidationError").classList.remove("hide");
    } else {
        isValid = true;
        if (!document.getElementById("fullNameValidationError").classList.contains("hide"))
            document.getElementById("fullNameValidationError").classList.add("hide");
    }
    return isValid;
}


selesai

Jika sudah jalankan program tersebut, jika ingin membuat tampilan agar lebih menarik tambahkan file css nya, teman teman dapat mengembangkanya.

DOWNLOAD NOW


Sekian terimakasih semoga bermanfaat.

HAPPY CODING