Как получить значение из таблицы, которая является целевым элементом? - PullRequest
Новая
       16

Как получить значение из таблицы, которая является целевым элементом?

0 голосов
/ 18 февраля 2019

У меня есть html-страница (с файлом javascript и json), где у меня есть поиск / фильтр клиентов с помощью EventListener Keyup. Чего я хочу добиться, это добавить выбранную строку таблицы в localalstorage и добавить в другую таблицу, куда я собираюсьсуммировать все значения.Пользовательский поиск / фильтр работают хорошо. 

class Item {
  constructor(name, price, stock) {
    this.name = name;
    this.price= price;
    this.stock = stock;

  }
}

searchFilter(e) {
    const input = e.target.value.toLowerCase();
    const tbody = document.querySelector('#search-output');
    const results = document.querySelector('#search-item');
    //Get json    
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `item.json`, true);
    xhr.onload = function () {
      if (this.status === 200) {
        const response = JSON.parse(this.responseText);
        let content = '';
        response.forEach(function (item) {


          if (item.Description.toLowerCase().includes(input)) {
            results.style.display = "block";
            content += `<tr><td>${item.Description} </td>
                                   <td>${(item.Price).toFixed(2)} </td>
                                   <td">${item.Stock}g</td>
                                  //Here I add an icon that Users can click on it to add them after searching
                                   <td><a href="#" class="add-item secondary-content">&nbsp <i class="fa fa-plus"></i></a></td></tr>`;
          }
          //If not keep content empty and dont show tbody
          if (input === '') {
            content = '';
            results.style.display = "none";
          }
        });
        //Pass content into tbody
        tbody.innerHTML = content;
      }
    }
    xhr.send();
    e.preventDefault();
  }
}

Затем я добавил свой EventListener клик по области поиска 

document.getElementById('search-output').addEventListener('click', function (e) {
  const ui = new UI();  
  ui.addFromSearch(e.target)

  e.preventDefault();

})

Но с функцией addFromSearch все усложняется 

addFromSearch(target) {
//This is the table where I want to pass selected item
const list = document.getElementById('total-item-list');

//If clicked object if fa fa-plus
    if (target.className === 'fa fa-plus') {
      // with 3 parentElement up I have the desired tr and I can pass it to list where I want to show all seleected items
      const tr = target.parentElement.parentElement.parentElement;
      list.appendChild(tr);     
    }
  }

Пока все работает хорошо, но проблема в том, что у меня есть значения в const tr, и я должен передать в Object, который я создал в начале, значение tr, как показано ниже.Но это не объект, поэтому я не могу получить значения с помощью tr.Children [i].Что бы вы предложили мне сделать в этот момент? 

<tr><td>Item1 </td>
  <td>12,50 </td>
 <td">25</td>
    <td><a href="#" class="add-item secondary-content">&nbsp <i class="fa fa-plus"></i></a></td></tr>
...