CRUD -Betrieb mit HTML, CSS und JavaScript [geschlossen]
Posted: 14 Sep 2025, 10:13
Ich führe den CRUD -Betrieb mit HTML, CSS und JavaScript durch. Während ich die Webseite ausführe, wird die Formularstruktur angezeigt, aber wenn ich die Eingabe greife, wird sie nicht eingelegt oder keine Eingaben gespeichert. Wie sollte ich das lösen und welchen Fehler mache ich dort? Warum meine Daten nicht gespeichert werden, ohne Daten zu speichern, kann ich den CRUD-Vorgang nicht ausführen.
Code: Select all
var selectedRow = null
function onFormSubmit() {
if (validate()) {
var formData = readFormData();
if (selectedRow == null)
insertNewRecord(formData);
else
updateRecord(formData);
resetForm();
}
}
function readFormData() {
var formData = {};
formData["fullName"] = document.getElementById("fullName").value;
formData["empCode"] = document.getElementById("empCode").value;
formData["salary"] = document.getElementById("salary").value;
formData["city"] = document.getElementById("city").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.fullName;
cell2 = newRow.insertCell(1);
cell2.innerHTML = data.empCode;
cell3 = newRow.insertCell(2);
cell3.innerHTML = data.salary;
cell4 = newRow.insertCell(3);
cell4.innerHTML = data.city;
cell4 = newRow.insertCell(4);
cell4.innerHTML = `Edit
Delete`;
}
function resetForm() {
document.getElementById("fullName").value = "";
document.getElementById("empCode").value = "";
document.getElementById("salary").value = "";
document.getElementById("city").value = "";
selectedRow = null;
}
function onEdit(td) {
selectedRow = td.parentElement.parentElement;
document.getElementById("fullName").value = selectedRow.cells[0].innerHTML;
document.getElementById("empCode").value = selectedRow.cells[1].innerHTML;
document.getElementById("salary").value = selectedRow.cells[2].innerHTML;
document.getElementById("city").value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData) {
selectedRow.cells[0].innerHTML = formData.fullName;
selectedRow.cells[1].innerHTML = formData.empCode;
selectedRow.cells[2].innerHTML = formData.salary;
selectedRow.cells[3].innerHTML = formData.city;
}
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("fullName").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;
}< /code>
Full Name
Emp Code
Salary
City
Full Name
EMP Code
Salary
City