Нужно сделать видимыми формы при нажатии на кнопку JS

Question

Пытаюсь сделать так, чтобы при нажатии на кнопку в таблице под каждым элементом строки появлялись формы. Пытался через массив, но, похоже, что-то передаю не так. Дайте по шапке, т.к. с Js не работал до этого

Код таблицы с кнопкой:

<c:forEach items="${books}" var="book">
                <tr>
                    <td align="center" scope="row">${book.name} <form class="form1" style="display: none">
                        <input type="text">
                    </form></td>
                    <td align="center">${book.author} <form class="form1" style="display: none">
                        <input type="text">
                    </form></td>
                    <td align="center">${book.num} <form class="form1" style="display: none">
                        <input type="text">
                    </form></td>
                    <td align="center">${book.date}  <form class="form1" style="display: none">
                        <input type="text">
                    </form></td>
                    <td align="center">${book.publisher}  <form class="form1" style="display: none">
                        <input type="text">
                    </form></td>
                    <td align="center"> <input type="button" value="Poказать/Скрыть" onclick="disp(document.getElementsByClassName('form1'))" /></td>
                </tr>

</c:forEach>

Код JavaScript

<script>
        function disp(form) {
            for(var i = 0; i < form.length;i++){
            if (form.style.display == "none") {
                form[i].style.display = "block";
            } else {
                form.style.display = "none";
                // таким оброзом через ajax пердается к скрипту который отправляет через метод
            }
        }
        }
</script>

Answer 1

Вот решение:

var btn = document.querySelector(".btn");
btn.onclick = function() {
  var elems = document.getElementsByClassName('form1');
  for (var i = 0; i < elems.length; i++) {
    if (elems[i].style.display != "block") {
      btn.textContent = "Скрыть";
      elems[i].style.display = "block";
    } else {
      elems[i].style.display = "none";
      btn.textContent = "Показать";
    }
  }
}

td {display: block;}

<c:forEach items="${books}" var="book">
  <table>
    <tr>
      <td align="center" scope="row">${book.name}
        <form class="form1" style="display: none">
          <input type="text">
        </form>
      </td>
      <td align="center">${book.author}
        <form class="form1" style="display: none">
          <input type="text">
        </form>
      </td>
      <td align="center">${book.num}
        <form class="form1" style="display: none">
          <input type="text">
        </form>
      </td>
      <td align="center">${book.date}
        <form class="form1" style="display: none">
          <input type="text">
        </form>
      </td>
      <td align="center">${book.publisher}
        <form class="form1" style="display: none">
          <input type="text">
        </form>
      </td>
      <td align="center">
        <button class="btn" type="button">Показать</button>
      </td>
    </tr>
  </table>
</c:forEach>

БЛОГ НА HUSL

Нужно сделать видимыми формы при нажатии на кнопку JS

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