יש לי טבלה בhtml ויש לי כפתור שמוסיף שורה בכל לחיצה עליו ויש לי כפתור ששמור את כל הנתונים בטבלה בlocalstorage הבעיה שבכל פעם שאני מוסיף שורה הוא לא מצליח לשמור
הנה קוד הjavascript שלי:
וגם אם מישהו יודע איך אפשר לשמור תמונה בlocalstorage אני אשמח
function addRow() {
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
var input = document.createElement("input");
input.type = "file";
input.accept = "image/*";
input.onchange = uploadFile;
cell1.appendChild(input);
cell2.innerHTML = '<input type="text" placeholder="שם מוצר">';
cell3.innerHTML = '<input type="text" placeholder="מחיר מוצר" pattern="[0-9]*">';
cell4.innerHTML = '<input type="text" placeholder="תיאור מוצר">';
cell5.innerHTML = '<button type="button" onclick="deleteRow(this)">מחק</button>';
saveData();
function deleteRow(button) {
var row = button.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function saveData() {
var table = document.getElementById("myTable");
var products = [];
for (var i = 1, row; row = table.rows[i]; i++) {
var product = {
image: row.cells[0].getElementsByTagName('img')[0].src,
name: row.cells[1].getElementsByTagName('input')[0].value,
price: row.cells[2].getElementsByTagName('input')[0].value,
description: row.cells[3].getElementsByTagName('input')[0].value
};
products.push(product);
}
localStorage.setItem('products', JSON.stringify(products));
}
function uploadFile(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var image = document.createElement("img");
image.src = e.target.result;
image.style.maxWidth = "120px";
image.style.maxHeight = "120px";
var cell = event.target.parentNode.parentNode;
cell.innerHTML = "";
cell.appendChild(image);
};
reader.readAsDataURL(file);
}
function loadData() {
var table = document.getElementById("myTable");
var data = localStorage.getItem("products");
// ניקוי הטבלה מכל השורות הקיימות לפני טעינת הנתונים
while (table.rows.length > 1) {
table.deleteRow(1);
}
if (data) {
data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
var row = table.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
var cell3 = row.insertCell();
var cell4 = row.insertCell();
var cell5 = row.insertCell();
cell1.innerHTML = '<img src="' + data[i].image + '" alt="Product Image" style="max-width: 120px; max-height: 120px;">';
cell2.innerHTML = '<input type="text" placeholder="שם מוצר" value="' + data[i].name + '">';
cell3.innerHTML = '<input type="text" placeholder="מחיר מוצר" pattern="[0-9]*" value="' + data[i].price + '">';
cell4.innerHTML = '<input type="text" placeholder="תיאור מוצר" value="' + data[i].description + '">';
cell5.innerHTML = '<button type="button" onclick="deleteRow(this)">מחק</button>';
}
}
}
loadData();
ניסיתי להחליף בין הסדר ההפעלה של הפונקציות וזה לא עזר אגב את רוב הקוד בניתי בעזרת chat gpt אבל את החלק הזה הוא לא הצליח לתקן לי ניסיתי גם בgoogle bard וגם בedge ai
