如何修复JavaScript动态表格中按钮文本切换失效问题

核心问题 #

1. 事件监听绑定范围有限：每次添加书籍后仅为第一个按钮绑定事件，后续书籍的按钮无监听；且表格重新渲染时旧元素被销毁，之前绑定的事件也失效。
2. 状态未同步数据源：点击状态按钮仅修改按钮文本，未更新books数组中的对应书籍状态，导致表格重新渲染后状态还原。
3. 缺少事件委托机制：动态生成的元素需通过父元素委托事件，而非直接绑定到每个临时元素。

修复后的完整JavaScript代码 #

// 从localStorage加载已有数据，无数据则初始化空数组
let books = JSON.parse(localStorage.getItem("myMangaList")) || [];

const $author = document.querySelector("#author");
const $status = document.querySelector("#status");
const $pages = document.querySelector("#pages"); 
const $tableBody = document.querySelector("#book-table-body");

function addBookToTable() {
    $tableBody.innerHTML = "";
    // 遍历数组时记录索引，用于绑定数据标识
    books.forEach((book, index) => {
      const htmlBook = `
        <tr>
          <td>${book.title}</td>
          <td>${book.author}</td>
          <td>${book.pages}</td>
          <!-- 添加data-index属性标记对应书籍的数组索引 -->
          <td><button class="status-button" data-index="${index}">${book.status}</button></td>
          <td><button class="delete" data-index="${index}">delete</button></td>
        </tr>
        `;
      $tableBody.insertAdjacentHTML("afterbegin", htmlBook);
    });
}

const addBook = (event) => {
    event.preventDefault();
    const cb = document.querySelector("#status");
    let book = {
        title: $("#title").val(),
        author: $("#author").val(),
        pages: $("#pages").val(),
        status: cb.checked ? "read" : "not read"
    };
    books.push(book);
    document.forms[0].reset();
    // 更新DOM和localStorage
    addBookToTable();
    localStorage.setItem("myMangaList", JSON.stringify(books));
};

// 事件委托处理状态切换按钮
$tableBody.addEventListener('click', function(e) {
    if (e.target.classList.contains('status-button')) {
        const index = parseInt(e.target.dataset.index);
        const book = books[index];
        // 切换状态并同步到数据源
        book.status = book.status === "read" ? "not read" : "read";
        localStorage.setItem("myMangaList", JSON.stringify(books));
        addBookToTable();
    }
});

// 事件委托处理删除按钮
$tableBody.addEventListener('click', function(e) {
    if (e.target.classList.contains('delete')) {
        const index = parseInt(e.target.dataset.index);
        books.splice(index, 1);
        localStorage.setItem("myMangaList", JSON.stringify(books));
        addBookToTable();
    }
});

function popForm() {
    $("#popup").removeClass("hide");
}

function minimizeForm(){
    $("#popup").addClass("hide");
}

function hideForm() {
    $("#popup").addClass("hide");
    $("#main-page").removeClass("hide");
}

function toggle() {
    $("#main-page").addClass("hide");
}

// 页面加载时渲染已有书籍
addBookToTable();

关键修复说明 #

• 事件委托：通过表格主体$tableBody统一监听点击事件，根据触发元素的类名执行对应操作，确保所有动态生成的按钮都能响应事件。
• 数据同步：点击状态按钮时直接修改books数组中对应书籍的状态，同步更新localStorage并重新渲染表格，保证数据源与页面展示一致。
• 索引标记：为按钮添加data-index属性，关联数组中的对应书籍，快速定位操作对象。
• 初始化加载：页面启动时从localStorage读取数据并渲染，避免刷新后数据丢失。

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