Получить значения полей ввода из таблицы, содержащей поля ввода в качестве своих данных?

Question

Сценарий:

• У меня есть таблица, содержащая поля ввода, и число полей ввода не фиксировано, это может быть любое число, поскольку таблица отображается каждый раз в зависимости от того, какие данные пользователь хочет получить из базы данных.

• Итак, каждая таблица отображается, каждая строка таблицы имеет 5 полей ввода как:

       <input name="t-1">
       <input name="r-1">
       <input name="q-1">
       <input name="s-1">
       <input name="p-1">
  

• В следующей строке таблицы снова есть 5 полей ввода, похожих на первую строку, но число счетчиков в имени для каждого входного поля увеличивается на 1.

      <input name="t-2">
      <input name="r-2">
      <input name="q-2">
      <input name="s-2">
      <input name="p-2">
  

Таким образом, для каждой строки число увеличивается на 1 согласно номеру строки. Пользователь может изменить и опубликовать таблицу для обновления базы данных.

Todo:

• Я хочу получить значения всех этих полей ввода, пока таблица форм размещена для обновления.
  Есть ли простой способ добиться этого?

Пожалуйста, предложите.
Спасибо.

Answer 1

querySelectorAll ваш друг. Это позволяет использовать CSS-селекторы :

• document.querySelectorAll("input[name*='-1']") для запроса первого ряда
• document.querySelectorAll("input[name*='r-']") для запроса первого столбца

См. скрипка .

Ни один класс не пострадал .

Answer 2

Я думаю, что самый простой способ добавить класс к каждому входу, который вас интересует. Например, data-field.

Таким образом, каждый вход будет выглядеть так

<input class="data-field" name="...">

Затем просто прокрутите их, добавив значения в любую структуру данных, которую вы хотите использовать, здесь я просто буду использовать список

var data = [];
$(".data-field").each((index, element) => { 
   data.push(element.value);
})

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

Однако, если вы намереваетесь просто использовать форму HTML. Достаточно просто убедиться, что все входные данные находятся в теле формы и имеют уникальные поля имени.

Они должны автоматически включаться в полезную нагрузку вашей формы.

Надеюсь, это поможет.