Форум по Javascript
Anonymous
Операция CRUD с использованием HTML, CSS и JavaScript
Сообщение
Anonymous » 14 сен 2025, 11:13
Я выполняю операцию CRUD, используя HTML, CSS и JavaScript. В этом случае, когда я запускаю веб -страницу, она отображает структуру формы, но когда я даю вход, его не принимают или не сохраняются. Как я должен решить это и какую ошибку я там совершаю? Почему мои данные не хранятся, без хранения данных я не могу выполнить операцию CRUD. < /p>
Код: Выделить всё
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
Подробнее здесь:
https://stackoverflow.com/questions/797 ... javascript
1757837590
Anonymous
Я выполняю операцию CRUD, используя HTML, CSS и JavaScript. В этом случае, когда я запускаю веб -страницу, она отображает структуру формы, но когда я даю вход, его не принимают или не сохраняются. Как я должен решить это и какую ошибку я там совершаю? Почему мои данные не хранятся, без хранения данных я не могу выполнить операцию CRUD. < /p> [code]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 [/code] Подробнее здесь: [url]https://stackoverflow.com/questions/79764155/crud-operation-using-html-css-and-javascript[/url]