javascript - 将一个表的数据复制到另一个表时切换按钮

Question

我有两个表 - 一个有列表，另一个是空的收藏夹表。

用户可以在第一个表格中的行上单击“添加”以将它们添加到收藏夹。然后“添加”按钮消失。

收藏夹行呈现为带有“删除”按钮，果然，如果单击，将从收藏夹表中删除该行。

我想做的是，如果从收藏夹表中删除该项目，则该项目的“添加”按钮会重新出现在第一个表中(以便用户可以选择重新添加它)，但我想不通了解如何在表之间建立连接以使其正常工作。

// render search results to first table

const renderData = () => {
  tableData.forEach(repo => {
    let row = document.createElement("tr");
    row.className = "resultRow";
    row.innerHTML = `
      <td><a href=${repo.url} target='_blank'>${repo.name}</a></td>
      <td>${repo.language}</td>
      <td>${repo.tag}</td>
      <td class='cell'><button type='button' class='add-btn'>${
        repo.add
      }</button></td>
    `;
    repoTable.appendChild(row);
  });


  // add event listener to 'Add' button. Hide 'Add' button when item is added to favourites

  addBtnArr = Array.from(document.getElementsByClassName("add-btn"));
  addBtnArr.map(i => {
    i.addEventListener("click", () => {
      let userFave = tableData[addBtnArr.indexOf(i)];
      i.style.visibility = 'hidden';
      console.log(userFave)
      addToFavourites(userFave);
    });
  });

};


// copy item to favourites table

const addToFavourites = rowData => {
  console.log(rowData);
  let faveRow = document.createElement("tr");
  faveRow.className = "favesRow";
  rowData.add = "Remove";
  faveRow.innerHTML = `
      <td><a href=${rowData.url} target='_blank'>${rowData.name}</a></td>
      <td>${rowData.language}</td>
      <td>${rowData.tag}</td>
      <td class='cell'><button type='button' class='remove-btn'>${
        rowData.add
      }</button></td>
 `;
  favesTable.appendChild(faveRow);
  hideSingleFave(favesTable);


  // add event listener to 'Remove' button. Remove corresponding row from favourites when clicked

  let removeBtn = Array.from(document.getElementsByClassName("remove-btn"));
  removeBtn.map(i => {
    i.addEventListener("click", () => {
      i.parentElement.parentElement.remove();
    });
  });
};

Answer 1

您可以采用以下方法。为第一个表中的每个 Add Button 添加一个唯一标识它的 id。类似于 index-add，因此您的按钮将具有 0-add、1-add、2-add 等 ID。

当您单击一个按钮时，将隐藏类应用于该按钮。说如果你点击 0-add class hidden 将被添加到它会隐藏按钮。 删除按钮中的 data-add-target = "0-add"。当您单击删除按钮时，读取 data-add-target 属性并删除从该目标按钮隐藏的类。

基本上你的按钮看起来像

<button id="0-add">Add</button>

单击此按钮后，它会隐藏起来，在收藏夹表中，会出现一行带有删除按钮

<button id="0-add" class = "hidden">Add</button>
<button data-add-target="0-add">Remove</button>

单击删除按钮后，从 data-add-target 中删除隐藏类。

<button id="0-add">Add</button>