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

您可以采用以下方法。向第一个表中的每个添加按钮添加一个ID，以唯一标识该ID。 索引添加之类的东西，因此您的按钮将具有0添加，1添加，2添加等ID。

单击按钮时，将隐藏的类应用于该按钮。假设您单击了0-add，则将隐藏的类添加到其中，这将隐藏按钮。并且在删除按钮中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>

当其数据复制到另一个表时，在一个表中切换按钮

1 个答案: