There is my table written with php :
$table = "<table>";
$table .= "<tr><th>ID</th><th>Link</th><th>Öncelik</th><th></th></tr>";
while ($row = mysqli_fetch_assoc($result)) {
$table .= "<tr>";
$table .= "<td class='code'>" . $row["Code"] . "</td>";
$table .= "<td class='link' contenteditable='true' oninput='showSaveButton(this.parentElement)'>" . $row["Link"] . "</td>";
$table .= "<td class='priority' contenteditable='true' oninput='showSaveButton(this.parentElement)'>" . $row["Priority"] . "</td>";
$table .= "<td><button onclick='deleteRow(" . $row["Code"] . ")'>Delete</button></td>";
$table .= "<td><button hidden=true onclick='saveRow(this.parentElement)' class='save-button'>Save</button></td>";
$table .= "</tr>";
}
$table .= "</table>";
echo $table;
scripts:
function showSaveButton(row) {
const saveButton = row.querySelector('.save-button');
saveButton.hidden = false;
}
function saveRow(row) {
const link = row.querySelector('.link').textContent;
const priority = row.querySelector('.priority').textContent;;
const code = row.querySelector('.code').textContent;
const xhr = new XMLHttpRequest();
const url = "update.php";
const params = "link=" + encodeURIComponent(link) + "&priority=" + encodeURIComponent(priority) + "&code=" + encodeURIComponent(code);
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.send(params);
When I edit priority or link fields I want the save
button to be shown. Then when I click the save button saveRow
function should be ran. But I got following error on this line of code:
const link = row.querySelector('.link').textContent;
"Cannot read properties of null (reading 'textContent')"
What should I do?
I cut saveRow
function context to paste in showSaveButton
function but it is working. but in saveRow
function Not.