当我尝试创建新按钮时，它不会重复

Question

我想在表格的每一行中创建一个删除按钮，因此我在 JavaScript 中创建了一个

removeButton

元素并将其附加到每一行。但是，每当我创建新行时，它都会移动到最后一行。

这是我的桌子

这是我创建新行时的表格

代码：

我创建了一个

removeButton

元素：

const removeButton = document.createElement("button");
removeButton.innerText = "Remove book";
removeButton.className = "table__remove-btn";

并在更新表时将其附加到每一行：

function updateTable() {
  table.innerHTML =
    "<tr><th>Title</th><th>Author</th><th>Pages</th><th>Is read?</th></tr>";
  if (myLibrary.length != 0) {
    const tableContent = document.createDocumentFragment();
    myLibrary.forEach((value) => {
      const tableRow = document.createElement("tr");
      const titleCell = document.createElement("td");
      const title = document.createElement("p");
      const author = document.createElement("td");
      const pages = document.createElement("td");
      const isRead = document.createElement("td");
      title.innerText = value.title;
      titleCell.appendChild(title);
      titleCell.appendChild(removeButton); // <------------------- Here!
      titleCell.className = "table__title-cell";
      tableRow.appendChild(titleCell);
      author.innerText = value.author;
      tableRow.appendChild(author);
      pages.innerText = value.pages;
      tableRow.appendChild(pages);
      isRead.innerText = value.isRead ? "Yes" : "No";
      tableRow.appendChild(isRead);
      tableContent.appendChild(tableRow);
    });
    table.appendChild(tableContent);
  }
}

我该如何解决？我希望每行都有

removeButton

Answer 1

发生的情况是，您使用 document.createElement() 仅创建了一个元素。当浏览器读取此代码时，它仅在内存中分配一个元素，并且每次运行 titleCell.appendChild(element) 时都会重新引用它，导致只有最后一行保留此按钮。为了使此代码按您希望的方式工作，您必须在 forEach 循环的每次迭代中创建一个新的按钮元素。我在下面提交了两个变体。一种使用预定义函数来创建按钮，另一种使用 updateTable() 内联代码。

预定义功能

  const newRemoveButton = () => {
      const removeButton = document.createElement("button");
      removeButton.innerText = "Remove book";
      removeButton.className = "table__remove-btn";
      return removeButton;
    };

然后你在 updateTable() 函数中使用这个函数

function updateTable() {
      table.innerHTML =
        "<tr><th>Title</th><th>Author</th><th>Pages</th><th>Is read?</th></tr>";
      if (myLibrary.length != 0) {
        const tableContent = document.createDocumentFragment();
        myLibrary.forEach((value) => {
          const tableRow = document.createElement("tr");
          const titleCell = document.createElement("td");
          const title = document.createElement("p");
          const author = document.createElement("td");
          const pages = document.createElement("td");
          const isRead = document.createElement("td");
          title.innerText = value.title;
          titleCell.appendChild(title);
          /*
                The difference lies here. The new button is created inside of 
                updateTable()'s scope, and therefore creates a new element for each time. 
                WHen this code was outside of the funciton, it used the same button for each row,
                making it so that only the last row got the button.
          */
          const removeButton = document.createElement("button");
          removeButton.innerText = "Remove book";
          removeButton.className = "table__remove-btn";
          titleCell.appendChild(removeButton); // <------------------- Here!
          // Rest of your code
          titleCell.className = "table__title-cell";
          tableRow.appendChild(titleCell);
          author.innerText = value.author;
          tableRow.appendChild(author);
          pages.innerText = value.pages;
          tableRow.appendChild(pages);
          isRead.innerText = value.isRead ? "Yes" : "No";
          tableRow.appendChild(isRead);
          tableContent.appendChild(tableRow);
        });
        table.appendChild(tableContent);
      }
    }

或者，您可以将所有代码内联到 updateTable() 中，如下所示：

function updateTable() {
      table.innerHTML =
        "<tr><th>Title</th><th>Author</th><th>Pages</th><th>Is read?</th></tr>";
      if (myLibrary.length != 0) {
        const tableContent = document.createDocumentFragment();
        myLibrary.forEach((value) => {
          const tableRow = document.createElement("tr");
          const titleCell = document.createElement("td");
          const title = document.createElement("p");
          const author = document.createElement("td");
          const pages = document.createElement("td");
          const isRead = document.createElement("td");
          title.innerText = value.title;
          titleCell.appendChild(title);
          const removeButton = document.createElement("button");
          removeButton.innerText = "Remove book";
          removeButton.className = "table__remove-btn";
          titleCell.appendChild(getRemoveButton()); // <------------------- Update predefined button with getRemoveButton function!
          titleCell.className = "table__title-cell";
          tableRow.appendChild(titleCell);
          author.innerText = value.author;
          tableRow.appendChild(author);
          pages.innerText = value.pages;
          tableRow.appendChild(pages);
          isRead.innerText = value.isRead ? "Yes" : "No";
          tableRow.appendChild(isRead);
          tableContent.appendChild(tableRow);
        });
        table.appendChild(tableContent);
      }
    }


just ask any questions if you're curios of anything