Как получить значение input в таблице?

Question

[yeezussniper]

Таблица заполняется с помощью php через do-while. пытаюсь прочитать через js значение в нужной ячейке. Все ячейки представляют собой input.
Я пытаюсь вытянуть value этого input

<table class="table table-sm table-hover allLines" id="TheTable">
              <thead>
                <tr>
                  <th scope="col" class="center">От</th>
                  <th scope="col" class="center">До</th>
                  <th scope="col" class="center">Угол</th>
                  <th scope="col" class="center">Мощ. Осевая</th>
                  <th scope="col" class="center">Мощ. Норм.</th>
                  <th scope="col" class="center">Керн</th>
                  <th scope="col" class="center">Керн норм.</th>
                  <th scope="col" class="center">Керн, %</th>
                  <th scope="col" class="center">Порода</th>
                  <th scope="col" class="center">Удалить</th>
                </tr>
              </thead>
              <tbody>
                <form method="post">
                  <?php

                  do {

                  ?>

                    <tr id="rowElem" class="<?php if ($rowLithology["poroda"] == "Уголь") {
                      echo 'hatching-black';
                      } ?>">
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="От" value='<?php echo '' . $rowLithology3["ot"] . ''; ?>' /></td>
                      <td class="center link"><input type="email" class="form-control form-control-sm" placeholder="До" value='<?php echo '' . $rowLithology3["do"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="Угол" value='<?php echo '' . $rowLithology3["ugol"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm " placeholder="М. Осевая" value='<?php echo '' . $rowLithology3["m_os"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="М. Норм" value='<?php echo '' . $rowLithology3["m_norm"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="Керн" value='<?php echo '' . $rowLithology3["kern"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="Керн норм." value='<?php echo '' . $rowLithology3["kern_norm"] . ''; ?>' /></td>
                      <td class="center"><input type="text" class="form-control form-control-sm" placeholder="Керн, %" value='<?php echo '' . $rowLithology3["kern_proc"] . ''; ?>' /></td>
                      <td class="center "><input type="text" class="form-control form-control-sm" placeholder="Порода" value='<?php echo '' . $rowLithology3["poroda"] . ''; ?>' /></td>
                      <td class="center "><i class="fas fa-trash-alt btn-del delete"></i></td>
                    </tr>
                  <?php } while ($rowLithology3 = mysqli_fetch_array($resultLithology3)); {
                  } ?>

                  <?php include 'components/modal/addPer.php'; ?>
                </form>
              </tbody>
              <input value="GOO" onclick="count()" type="button">
            </table>

Код js:

function count() {

    //var count = TheTable.getElementsByTagName("tr").length; //получаем кол. строк

    var list = document.getElementById("TheTable").getElementsByTagName("tr");

    for (var i = 0; i < list.length; ++i)
    {  
      var aa = list[i].getElementsByTagName("input")[3];
      console.log(aa);
    }

  }

В итоге в консоле получаю всю строку input. Если указать .value, то выйдет ошибка

Comments

[FinGanapre]

Не по теме, но если строки выводятся циклом, то почему у строк статичный id (rowElem)? У вас будет несколько элементов с одинаковым id на странице. Видимо, не уследили:)

[yeezussniper]

FinGanapre, уже убрал, в ходе экспериментов остался)

Answer 1

[FinGanapre]

У вас в list храниться сейчас элемент tr из thead (помимо необходимых). На первой итерации вашего цикла вы проходите по немуи в list[i].getElementsByTagName("input") получаете undefined, т.к. там нет тегов input. При обращении undefined.value вы, соответственно, получаете ошибку. Измените селектор на более подробный, чтобы не захватывать tr из thead.

Ну и у вас будет куча строк с id rowElement. Видимо, он должен быть динамическим и вы хотели добавить туда idx из цикла while. Советы по php - не нужно делать проверки на что-то прямо в шаблоне (class=...). Вынесите их в отдельные функции, которые будут возвращать вам значение. Если вам потребовалось echo в шаблоне, значит вы что-то делаете не так и нужно вынести логику за пределы шаблона. Также, не нужно соединять получение данных из бд и вывод шаблона. Почитайте про MVC.

Единственное, что работает быстрее querySelector это getElementById. Для всего остального используйте querySelector и querySelectorAll. По принципу использования как любые css селекторы

Например:

// объявляем функцию
const count = () => {
  // используем querySelectorAll чтобы указать, что нужны только tr в tbody
  let list = document.querySelectorAll("#TheTable tbody tr");

  // выводим значение 3 input
  list.forEach( tr => console.log( tr.querySelectorAll('input')[3].value ));
}

// вызываем функцию
count();

forEach
querySelector
querySelectorAll

Comments

[yeezussniper]

Спасибо огромное, и за теорию спасибо))

[yeezussniper]

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

Сделал вот таким образом. Не знаю на сколько правильно)

list.forEach( tr => tr.querySelectorAll('input')[3].value = tr.querySelectorAll('input')[1].value - tr.querySelectorAll('input')[0].value );

[FinGanapre]

yeezussniper, работать будет и так (технически, логически я не знаю вашу задачу), но в проектах обычно есть ограничение на длину строки, так что никто не мешает вам перенести, добавив фигурные скобки к стрелочной функции и искать элементы только один раз, сохранять в переменную, а потом доставать из псевдо-массива (NodeList). Если выполняете арифметические операции со значениями из DOM, то лучше всегда приводить к числу предварительно (т.к. '15' + '10' = '1510'). Либо через parseInt/parseFloat, либо просто добавляя + перед предположительно строковым значением. В вашем случае вы вычитаете и тут в любом случае будет перевод в число, но если вдруг захотите сложить будет не очень)

list.forEach( tr => {
  // один раз нашли все inputs и сохранили в переменную
  let inputs = tr.querySelectorAll('input')
  // дёргаем их из псевдо-массива
  inputs[3].value = +inputs[1].value - +inputs[0].value
})

[yeezussniper]

FinGanapre, спасибо, Вы абсолютно правы. Такая проблема и возникла)