<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#btnTambah {
margin-bottom: 10px;
}
table th {
text-align: left;
}
</style>
</head>
<body>
<button id="btnTambah" type="button" onclick="addField()">Tambah Field</button>
<br />
<table border="1" cellspacing="0" cellpadding="5" id="liveEdit">
<tr>
<th>Nama</th>
<th>Email</th>
<th>Action</th>
</tr>
</table>
<script>
const table = document.getElementById("liveEdit");
function createField(name) {
let input = document.createElement("input");
input.type = "input";
input.name = name;
input.placeholder = name;
return input;
}
function createButton(name) {
let button = document.createElement("button");
button.type = "button";
button.name = name;
button.innerHTML = name;
button.onclick = save;
return button;
}
function save() {
alert("Proses simpan disini...");
}
function addField() {
let rowNumber = table.rows.length;
let row = table.insertRow(rowNumber);
row.insertCell(0).appendChild(createField("nama"));
row.insertCell(1).appendChild(createField("email"));
row.insertCell(2).appendChild(createButton("save"));
}
</script>
</body>
</html>
0 comments:
Post a Comment