Заполнение полей значениями из таблицы по нажатию на чекбокс

191

12 апреля 2022, 22:00

Всем привет! Как можно сделать вывод информации из конкретной строки таблицы в поля ввода по нажатию на чекбокс? При том, что значение количества полей в таблице не фиксировано.

Таблица

<table class="table">
  <tr>
      <th>Изображение</th>
      <th>№</th>
      <th>Заболевание</th>
      <th>Описание</th>
  </tr>
  {% if elements %} 
    {% for el in elements %}
      <tr>
          <td><input type = "checkbox" ></ td >
          < td >{{ el.id }}</td>
          <td>{{ el.name_disease }}</td>
          <td>{{ el.distribution_disease }}</td>
      </tr>
    {% endfor %} 
  {% endif %}
</table>

Поля

<div class="left_block">
    <div class="left_items">
        <p>Наименование заболевания*</p>
        <input type = "text" >
    </ div >
    < !-- /.left_items-- >
    < div class="left_items">
        <p>Описание заболевания*</p>
        <textarea></textarea>
    </div>
    <!-- /.left_items -->
</div>

Answer 1

Вообще для такой задачи лучше использовать radio, так как чекбоксов можно выбрать много. Нужно добавить в теги <td> хотя бы классы. Допустим это будут классы name и desc. Вот общая идея:

const checkboxes = [...document.querySelectorAll('.table input[type=radio]')];
const input = document.querySelector('.left_block input');
const textarea = document.querySelector('.left_block textarea');
checkboxes.forEach(box => {
  box.addEventListener('change', e => {
    input.value = box.closest('tr').querySelector('.name').textContent;
    textarea.value = box.closest('tr').querySelector('.desc').textContent;
  });
});

Конечно это сделано под радио кнопки, если прям очень нужно что бы были чекбоксы, то нужно писать дополнительные логики, что бы отображать последний активный чекбокс. Надеюсь смысл понятен.

P.S. Если будете переделывать на радио-кнопки не забудьте им задать атрибут name, что бы связать их между собой.

Answer 2

Вы можете создать переменные для хранения данных, которые отражаются в инпутах и слушать onchange чекбокса, а в функцию, которая будет срабатывать на onchange и распределять данные, передавать объект свойств, которые должны подставиться в нужные переменные, с которыми связаны инпуты.