Data Entry Form with Editable Table
Kita akan menciptakan formulir entri data buah dengan tabel yang dapat diedit secara langsung. Dengan menggunakan HTML, CSS, dan JavaScript, Anda dapat menambahkan, mengedit, dan menghapus data buah secara dinamis. Tabel menampilkan informasi seperti nama buah, berat (kg), dan gambar buah. Fungsi edit memungkinkan pengguna untuk mengedit data langsung di dalam tabel, dan fungsi hapus menghapus baris yang dipilih.
Fungsi Utama:
Formulir Entri Data:
- Pengguna dapat memasukkan nama buah, berat, dan URL gambar buah.
- Tombol "Tambah Data" menambahkan data baru ke dalam tabel.
Tabel Data:
- Menampilkan data buah dalam tabel dengan kolom: No, Nama Buah, Berat (kg), Gambar, dan Opsi.
- Opsi mencakup tombol "Edit", "Hapus", dan "Simpan" (selama mode edit).
Mode Edit:
- Ketika tombol "Edit" diklik, pengguna dapat mengedit data langsung di dalam tabel.
- Tombol "Simpan" muncul selama mode edit untuk menyimpan perubahan.
Fungsi Edit dan Hapus:
- Tombol "Edit" memungkinkan pengguna mengedit data.
- Tombol "Hapus" menghapus baris yang dipilih.
Tambahan:
- Setiap baris pada tabel dapat diedit langsung dengan mengeklik tombol "Edit".
- Gambar buah dapat diakses dan ditampilkan di dalam tabel.
- Setiap baris ditandai dengan latar belakang merah jika berat buah lebih dari 5 kg.
- Formulir dan tabel dirancang responsif untuk tampilan yang baik di perangkat apa pun.
Dengan memahami fungsi-fungsi di atas, Anda dapat menyesuaikan dan mengintegrasikan kode ini ke dalam blog Anda. Pastikan memberikan kredit kepada sumber kode asli dan menjelaskan cara pengguna dapat memanfaatkannya.
HTML:
<form id="dataForm">
<label for="itemName">Nama Buah:</label>
<input type="text" id="itemName" name="itemName" required>
<label for="itemWeight">Berat:</label>
<input type="number" id="itemWeight" name="itemWeight" min="0" required>
<label for="itemImage">URL Gambar:</label>
<input type="text" id="itemImage" name="itemImage">
<button type="button" onclick="addData()">Tambah Data</button>
</form>
<!-- Table untuk memperlihatkan data -->
<table id="dataTable">
<thead>
<tr>
<th>No</th>
<th>Nama Buah</th>
<th>Berat (kg)</th>
<th>Gambar</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Data akan ditambahkan di sini -->
</tbody>
</table>
CSS:
<style>
table {
border-collapse: separate;
width: 80%;
margin: 20px auto;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
tr.red-bg td:nth-child(3) {
background-color: red;
}
#dataForm {
text-align: center;
margin-top: 20px;
}
img {
max-width: 50px;
max-height: 50px;
}
.edit-input {
width: 100%;
}
</style>
JS:
<script>
var editMode = false;
var editedRow;
function addData() {
if (editMode) {
// Update existing row in edit mode
updateRow();
} else {
// Add new row in add mode
var itemName = document.getElementById('itemName').value;
var itemWeight = parseInt(document.getElementById('itemWeight').value);
var itemImage = document.getElementById('itemImage').value;
var tableBody = document.querySelector('#dataTable tbody');
var newRow = document.createElement('tr');
var rowCount = tableBody.rows.length + 1;
newRow.innerHTML = '<td>' + rowCount + '</td>' +
'<td><span contenteditable="true">' + itemName + '</span></td>' +
'<td><span contenteditable="true">' + itemWeight + '</span></td>' +
'<td><img src="' + itemImage + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;"></td>' +
'<td><button type="button" onclick="saveRow(this)">Save</button>' +
' <button type="button" onclick="deleteRow(this)">Hapus</button>' +
' <button type="button" onclick="editRow(this)">Edit</button></td>';
// Apply red background if weight is more than 5 kg
if (itemWeight > 5) {
newRow.classList.add('red-bg');
}
tableBody.appendChild(newRow);
clearForm();
}
}
function editRow(button) {
editMode = true;
editedRow = button.parentNode.parentNode;
// Change button text to "Update"
document.querySelector('#dataForm button').textContent = 'Update';
// Replace content with input fields for inline editing
for (var i = 1; i < editedRow.cells.length - 1; i++) {
var cellContent = editedRow.cells[i].textContent;
if (i !== 3) {
editedRow.cells[i].innerHTML = '<input class="edit-input" type="text" value="' + cellContent + '">';
} else {
// Handle image separately
editedRow.cells[i].innerHTML = '<input class="edit-input" type="text" value="' + cellContent + '">' +
'<img src="' + cellContent + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;">';
}
}
}
function updateRow() {
// Reset edit mode, change button text, and clear form
editMode = false;
document.querySelector('#dataForm button').textContent = 'Tambah Data';
// Update row with edited values
var inputs = editedRow.querySelectorAll('.edit-input');
for (var i = 0; i < inputs.length; i++) {
if (i !== 2) {
editedRow.cells[i + 1].innerHTML = inputs[i].value;
} else {
// Handle image separately
editedRow.cells[i + 1].innerHTML = '<img src="' + inputs[i].value + '" alt="Gambar Buah" style="max-width: 50px; max-height: 50px;">';
}
}
clearForm();
}
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
clearForm();
}
function saveRow(button) {
if (editMode) {
updateRow();
} else {
addData();
}
}
function clearForm() {
// Clear form values
document.getElementById('itemName').value = '';
document.getElementById('itemWeight').value = '';
document.getElementById('itemImage').value = '';
}
</script>
OUTPUT:
Komentar
Posting Komentar