1

Пытаюсь сделать так, чтобы при нажатии на кнопку в таблице под каждым элементом строки появлялись формы. Пытался через массив, но, похоже, что-то передаю не так. Дайте по шапке, т.к. с 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>

1 ответ 1

0

Вот решение:

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>

4
  • td {display: block;} это мне запихнуть в стили?
    – Шаман
    22 фев 2021 в 22:49
  • Скопировал, но почему-то не работает.Ладно, утром уже посмотрю) Спасибо большое) Как будет какой-то результат, напишу)
    – Шаман
    22 фев 2021 в 22:56
  • @Sevastopol'В душе не ипу, весь код взял, а ничего не поменялось)
    – Шаман
    23 фев 2021 в 10:52
  • Нет) Сделал другим путём) Но раз у вас всё работает, то для кого-то может быть правильным)))
    – Шаман
    23 фев 2021 в 20:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.