i have tables with edit button on the side. if i click the edit button it works fine, i can change/modify and the button edit change to save button just in case you need to save update the changes in the table. when i click the save button it updates the table but the editable cells in row table, does not exit, even i hit the save button it didn't exit the edit mode. i used javascript for my coding. can you help me please
i just add this line because in my other code work it works.
function saveCV(rowId) {
var row = document.querySelector("tr[data-id='" + rowId + "']");
var editableCells = row.querySelectorAll(".editable");
var formData = new FormData();
editableCells.forEach(function (cell) {
var fieldName = cell.getAttribute("data-field");
var newValue;
if (fieldName === "cvdate") {
var inputElement = cell.querySelector("input");
newValue = inputElement ? inputElement.value : "";
} else if (fieldName === "branch") {
var selectElement = cell.querySelector("select");
newValue = selectElement ? selectElement.value : "";
} else if (fieldName === "booknumber" || fieldName === "costcenter") {
var selectElement = cell.querySelector("select");
newValue = selectElement ? selectElement.value : "";
} else {
var inputElement = cell.querySelector("input");
newValue = inputElement ? inputElement.value : "";
}
formData.append(fieldName, newValue);
});
var actionsCell = row.querySelector(".center-align-column");
actionsCell.innerHTML = `
<button class='edit-button' onclick='editCV(${rowId})'>Edit</button>
<button class='delete-button' onclick='deleteCV(${rowId})'>Delete</button>`;
row.removeAttribute("data-edit-mode"); // Clear the edit mode flag
row.removeAttribute("data-original-values"); // Clear the original values data attribute
var xhr = new XMLHttpRequest();
xhr.open("POST", "updateCV.php?id=" + rowId, true);
row.setAttribute("data-edit-mode", "true"); // Restore edit mode
row.classList.add("editing"); // Add 'editing' class to indicate edit mode
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
// exitEditMode(row);
} else {
// Update failed
alert("Failed to update record");
}
}
};
xhr.send(formData);
}
above code, im expecting it to save/update changes in my table and exit from edit mode