原生JavaScript练习问题：复选框状态转文字显示与表格行删除功能实现求助

Hey there! Let's work through your two issues one by one—they're both fixable with some small tweaks to your code.

Issue 1: Checkbox showing "true/false" instead of "yes/no" #

The root cause here is straightforward: document.getElementById("read").checked returns a boolean value (true or false), and when you set td5.innerHTML = book.read, you're just converting that boolean to its raw string representation.

To display user-friendly "yes" or "no" instead, convert the boolean to text when rendering the table cell. Replace this line:

td5.innerHTML = book.read;

With this:

// Use textContent for plain text (safer and cleaner than innerHTML here)
td5.textContent = book.read ? "yes" : "no";

This ternary operator checks if the checkbox was checked (true) and shows "yes", otherwise it shows "no". Your book.read property stays a boolean (useful for any future logic), but users see the friendly text they expect.

Issue 2: Delete button not working #

There are two key problems here:

1. You're appending the button directly to the table row (<tr>), but rows can only contain <td> or <th> elements. This invalid DOM structure can break expected behavior.
2. You haven't added an event listener to the button to handle the click action.

Here's the fixed code for creating the delete button and adding its functionality:

books.map((book, index) => {
  // ... your existing code to create other table cells ...
  
  // First, create a <td> to hold the delete button (required for valid HTML)
  const deleteCell = document.createElement("td");
  
  // Create the button element
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "Delete";
  deleteBtn.classList.add("deleteBtn");
  
  // Add click event listener to handle deletion
  deleteBtn.addEventListener("click", () => {
    // Remove the row from the DOM
    row.remove();
    
    // Remove the corresponding book from the books array
    books.splice(index, 1);
    
    // Update localStorage with the updated list of books
    localStorage.setItem("BookList", JSON.stringify(books));
  });
  
  // Append the button to the cell, then the cell to the row
  deleteCell.appendChild(deleteBtn);
  row.appendChild(deleteCell);
  
  tbody.appendChild(row);
});

Key improvements here:

• We wrap the button in a proper <td> element to maintain valid HTML structure.
• We use the index parameter from the map function to target the exact book in the array for deletion.
• The event listener handles three critical steps: removing the row from the page, updating the books array, and saving the updated list back to localStorage.

One quick note: When you initially save to localStorage, you have books.splice(0,1);—just double-check this is intentional (it removes the first item from the books array). As long as you're repopulating books from localStorage when the page loads, this should be fine.

Hope these fixes get your code working as expected!

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