我試圖在引導程式模式中顯示本地存盤資料，但它只顯示來自第一個陣列的專案，我如何顯示來自被單擊的陣列的資料？這是我的網站和我正在談論的 github 代碼： https ://github.com/nodarchik/alliance-js https://nodarchik.github.io/alliance-js/
那是我的代碼：
let data = [{}];
let acceptData = () => {
data.push({
fName: fName.value,
lName: lName.value,
address: address.value,
date: date.value,
gender: gender.value,
textarea:textarea.value,
});
localStorage.setItem("data", JSON.stringify(data));
createPost();
};
let createPost = () => {
table.innerHTML = "";
data.map((x,y) =>{
return (table.innerHTML = `
<tbody id=${y}>
<tr >
<td scope="col">${y 1}</td>
<td scope="col">${x.fName}</td>
<td scope="col">${x.lName}</td>
<td scope="col">${x.address}</td>
<td scope="col">${x.date}</td>
<td scope="col">${x.gender}</td>
* <div>
<div id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div >
<div>Notes</div>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > *
** <div scope="col">${x.textarea}</div> **
</div>
</div>
</div>
</div>
* <td scope="col" data-bs-toggle="modal" data-bs-target="#modal">Click to see</td>
<td id="btnsize" type="button" onClick="deletePost(this);createPost()">Delete</td>*
</tr>
</tbody>
`);
});
resetForm();
};
我嘗試在沒有模態的情況下在表上顯示本地存盤資料，它運行良好。
uj5u.com熱心網友回復：
您可以嘗試為模態提供唯一 ID 嗎？動態使用多個模態框時，我們需要為所有模態框提供一個唯一的 ID，否則它將始終使用提供的 ID 打開第一個模態框
let createPost = () => {
table.innerHTML = "";
data.map((x,y) =>{
return (table.innerHTML = `
<tbody id=${y}>
<tr >
<td scope="col">${y 1}</td>
<td scope="col">${x.fName}</td>
<td scope="col">${x.lName}</td>
<td scope="col">${x.address}</td>
<td scope="col">${x.date}</td>
<td scope="col">${x.gender}</td>
* <div>
<div id="modal_${y}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div >
<div >
<div >
<div>Notes</div>
<button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div > *
** <div scope="col">${x.textarea}</div> **
</div>
</div>
</div>
</div>
* <td scope="col" data-bs-toggle="modal" data-bs-target="#modal_${y}">Click to see</td>
<td id="btnsize" type="button" onClick="deletePost(this);createPost()">Delete</td>*
</tr>
</tbody>
`);
});
resetForm();
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/534634.html