Bootstrap模态框仅显示LocalStorage首个数组项问题求助

我尝试在Bootstrap模态框中展示LocalStorage中的数据，但目前仅能显示数组的首个条目。如何实现点击对应行时，展示该行所属数组条目的数据？需要说明的是，在无模态框的表格中直接展示LocalStorage数据是完全正常的。

问题根源 #

你当前代码的核心问题是：循环生成的所有模态框都使用了同一个idmodal。HTML中id必须是唯一标识，浏览器只会匹配到第一个id为modal的元素，所以无论点击哪一行，都会打开第一个模态框，自然只显示第一条数据。

解决方案（推荐复用单个模态框） #

最高效的方式是只保留一个全局模态框，点击行时动态向模态框填充对应的数据，具体步骤如下：

1. 把模态框移出循环，放在页面全局位置 #

将模态框代码从createPost的循环中提取出来，放在表格外（比如页面底部）：

<!-- 全局复用的模态框 -->
<div class="modal fade" id="modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div>Notes</div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- 动态填充内容的容器 -->
      </div>
    </div>
  </div>
</div>

2. 修改createPost函数，移除循环内的模态框并添加点击事件 #

去掉循环里的模态框代码，给"Click to see"按钮添加点击事件，传递当前行的索引：

let createPost = () => {
  table.innerHTML = "";
  data.map((x,y) =>{
    return (table.innerHTML += `
    <tbody id=${y}>
      <tr class="grid">
        <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>

        <td scope="col" data-bs-toggle="modal" data-bs-target="#modal" onclick="fillModal(${y})">Click to see</td>
        <td class="btn btn-danger active m-1" onClick="deletePost(this);createPost()">Delete</td>
      </tr>
    </tbody>
  `);
  });
  resetForm();
};

3. 新增填充模态框的函数 #

添加一个函数，根据索引从data数组中取出对应数据，填充到模态框的内容容器中：

// 填充模态框内容的函数
function fillModal(index) {
  const modalBody = document.getElementById('modalBody');
  modalBody.innerHTML = `<div scope="col">${data[index].textarea}</div>`;
}

4. 补充页面初始化逻辑（可选但必要） #

页面加载时从LocalStorage读取保存的数据，避免刷新后丢失：

// 页面加载时恢复LocalStorage中的数据
window.addEventListener('load', () => {
  const savedData = localStorage.getItem('data');
  if (savedData) {
    data = JSON.parse(savedData);
    createPost();
  }
});

备选方案（生成唯一id的多个模态框） #

如果你坚持为每一行生成独立模态框，只需给每个模态框和对应按钮设置唯一id：

let createPost = () => {
  table.innerHTML = "";
  data.map((x,y) =>{
    return (table.innerHTML += `
    <tbody id=${y}>
      <tr class="grid">
        <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 class="modal fade" id="modal-${y}" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <div>Notes</div>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                  <div scope="col">${x.textarea}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <td scope="col" data-bs-toggle="modal" data-bs-target="#modal-${y}">Click to see</td>
        <td class="btn btn-danger active m-1" onClick="deletePost(this);createPost()">Delete</td>
      </tr>
    </tbody>
  `);
  });
  resetForm();
};

这种方式会生成与数据条目数量相同的模态框元素，不如复用单个模态框高效，但逻辑更直观。

内容的提问来源于stack exchange，提问作者tch