Обновлять данные на странице без ее перезагрузки

Question

Есть табличка, довольно большая, чтобы каждый раз тянуть её из базы заново. Да и много другого, что вовсе не нужно впустую подгружать и перерисовывать постоянно.

Хотелось бы управлять видимостью колонок (и может даже сортировкой), без перезагрузки страницы.

Код:

<table>
  <tr>
    <th>№</th>
    <th>Наименование товара</th>
    <th>Ед. изм.</th>
    <th>Количество</th>
    <th>Цена за ед. изм., руб.</th>
    <th>Стоимость, руб.</th>
  </tr>
  <tr>
    <td>1.</td>
    <td>Томаты свежие</td><td>кг</td><td>15,20</td><td>69,00</td><td>1048,80</td>
  </tr>
  <tr>
    <td>2.</td>
    <td>Огурцы свежие</td><td>кг</td><td>2,50</td><td>48,00</td><td>120,00</td>
  </tr>
  <tr>
    <td colspan="5" style="text-align:right">ИТОГО:</td><td>1168,80</td>
  </tr>
</table>

<p><b>Управление видимостью колонок таблицы:</b></p>
   <p><input type="checkbox" name="option1" value="a1" checked>Наименование товара<Br>
   <input type="checkbox" name="option2" value="a2" checked>Ед. изм.<Br>
   <input type="checkbox" name="option3" value="a3" checked>Количество<Br> 
   <input type="checkbox" name="option4" value="a4" checked>Цена за ед. изм., руб.</p>

Ссылка на JSFiddle

Хочется получить следующий результат:

галочку убрал - колонка пропала
добавил - появилась

но страницу каждый раз не перегружать.

Может кто добавить функционал как это правильно реализуется?

(желательно без сторонних гигантских библиотек, если возможно)

Answer 1

Считаю нужным предупредить, что Вам, по хорошему, следует перверстать Ваш шаблон, обернув каждую из колонок в один логический блок

Тогда Вы сможете управлять видимостью колонки как одним элементом, вместо того что бы обращаться к каждому из элементов внутри напрямую.

Ниже я привел простой пример от которого Вы можете оттолкнуться. Его имплементация не требует изменения верстки. Если же Вы воспользуетесь моим советом выше, то просто замените обращение к множеству элементов на "обертку", которая будет представлять собой всю колонку в целом.

const inputs = document.querySelectorAll("input")

const handleChange = event => {
  const type = event.target.getAttribute("data-col")
  const items = document.querySelectorAll(`[data-type=${type}]`)

  if (!event.target.checked) {
    items.forEach(item => item.classList.add("hide"))
  } else {
    items.forEach(item => item.classList.remove("hide"))
  }
}

for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener("click", handleChange, false)
}

.hide {
  display: none;
}

<table>
  <tr>
    <th>№</th>
    <th data-type="name">Наименование товара</th>
    <th data-type="price">Стоимость, руб.</th>
  </tr>
  <tr>
    <td>1.</td>
    <td data-type="name">Томаты свежие</td>
    <td data-type="price">1048,80</td>
  </tr>
  <tr>
    <td>2.</td>
    <td data-type="name">Огурцы свежие</td>
    <td data-type="price">120,00</td>
  </tr>
  <tr>
    <td colspan="5" style="text-align:right">ИТОГО:</td>
    <td>1168,80</td>
  </tr>
</table>

<p><b>С какими операционными системами вы знакомы?</b></p>
<p><input type="checkbox" data-col="name" name="option1" value="a1" checked>Наименование товара
  <input type="checkbox" data-col="price" name="option5" value="a5" checked>Стоимость, руб.</p>

БЛОГ НА HUSL

Обновлять данные на странице без ее перезагрузки

Ответы (1 шт):