当一个表的数据被复制到另一个表时切换按钮答案

【问题标题】：Toggle button in one table when its data is copied to another当一个表的数据被复制到另一个表时切换按钮
【发布时间】：2019-02-26 08:56:33
【问题描述】：

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

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

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

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

// 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();
    });
  });
};

【问题讨论】：

标签： javascript html dom ecmascript-6 html-table

【解决方案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>

【讨论】：