Кнопка переключения в одной таблице, когда ее данные копируются в другую - PullRequest
Новая
       6

Кнопка переключения в одной таблице, когда ее данные копируются в другую

0 голосов
/ 22 сентября 2018

У меня есть две таблицы - одна со списком, а другая пустая таблица избранного.

Пользователь может нажать «Добавить» в строках первой таблицы, чтобы добавить их в избранное.Кнопка «Добавить» исчезнет.

Строка избранного отображается с помощью кнопки «Удалить» и, конечно же, удаляет строку из таблицы избранного при нажатии.

Что я хочу сделать, так это иметь кнопку «Добавить» элементапоявится снова в первой таблице, если элемент будет удален из таблицы избранного (чтобы у пользователя была возможность добавить его заново), но я не могу понять, как установить соединение между таблицами, чтобы он работал. 

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

1 Ответ

0 голосов
/ 22 сентября 2018

Вы можете воспользоваться следующим подходом.Добавьте идентификатор к каждой кнопке добавления в первой таблице, которая однозначно идентифицирует ее.Что-то вроде index-add , поэтому у вашей кнопки будут идентификаторы, такие как 0-add, 1-add, 2-add и т. Д.

При нажатии на кнопку применяется скрытый классна эту кнопку.Скажем, если вы нажмете 0, добавьте к нему скрытый класс, который бы скрыл кнопку.И 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>
...