Сохранить все и отредактировать функцию кнопки таблицы [закрыто] ⇐ Php

[Anonymous]

Я создал редактируемую таблицу, поэтому пользователь может редактировать содержимое таблицы, нажав кнопку редактирования (которая позволяет вводить текстовые поля при нажатии на определенную ячейку), а кнопка «Сохранить» сохраняет внесенные изменения. Кнопка «Добавить строку» добавляет новую строку с текстовым полем, и как только пользователь нажимает «Сохранить строку», данные текстового поля вводятся в базу данных, и таблица обновляется.
Но после добавления строки и сохранения с помощью сохранения все, кнопка «Сохранить» вообще не сохраняет изменения ячеек. пожалуйста, помогите мне исправить функциональность кнопок сохранения и редактирования


$(document).ready(function() {
// Hide all input elements initially
$('.txtedit').hide();

// Initialize an array to store all the changes
var changes = [];

// Show Input element when Edit button with attribute onclick="editAll" is clicked
$('[onclick="editAll"]').click(function() {
$('.txtedit').show();
$('.edit').hide();
});

// Hide Input element when SaveAll button with attribute onclick="saveAll" is clicked
$('[onclick="saveAll"]').click(function() {
$('.txtedit').hide();
$('.edit').show();

// Send an AJAX request to save all the changes at once
$.ajax({
url: 'update.php',
method: 'POST',
data: { changes: changes },
success: function(response) {
if (response == "success") {
console.log('All changes saved successfully');
changes = []; // Reset the changes array
} else {
console.log("Not all changes saved.");
}
},
error: function(xhr, status, error) {
console.log("Error: " + xhr.responseText);
}
});
});

// Capture changes made to input fields
$(".txtedit").focusout(function() {
// Get edit id, field name and value
var id = this.id;
var split_id = id.split("_");
var field_name = split_id[0];
var edit_id = split_id[1];
var value = $(this).val();

// Store the change in the changes array
changes.push({
field: field_name,
value: value,
id: edit_id
});

// Hide and Change Text of the container with input element
$(this).prev('.edit').show();
$(this).prev('.edit').text(value);
});

$('#add-button').click(function() {
addRow();
$('#save-button').show(); // Show the save button when adding a new row
});

// Function to save the new row
function saveRow() {
var table = document.getElementById("department_table");
var lastRow = table.rows[table.rows.length - 1];

// Extract the values from the input fields
var name = lastRow.cells[1].getElementsByClassName('txtedit')[0].value;
var username = lastRow.cells[2].getElementsByClassName('txtedit')[0].value;
var email = lastRow.cells[3].getElementsByClassName('txtedit')[0].value;
var department = lastRow.cells[4].getElementsByClassName('txtedit')[0].value;

// Send AJAX request to insert new row into database
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Handle response from server if needed
console.log(this.responseText);
}
};

// Construct the data to be sent
var data = "name=" + name + "&username=" + username + "&email=" + email + "&department=" + department;

// Send the values to the server-side script
xhttp.open("POST", "insert.php", true); // Replace "insert.php" with your server-side script
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(data);
}
});

function addRow() {
var table = document.getElementById("department_table");
var row = table.insertRow(-1);
var counter = table.rows.length - 1;

var cell1 = row.insertCell(0);
cell1.innerHTML = counter++;

for (var i = 1; i

Подробнее здесь: https://stackoverflow.com/questions/784 ... n-function