Как получить все значения из таблицы html?

Рейтинг: 0Ответов: 1Опубликовано: 18.01.2023

Есть вот такая таблица, с n-ным количеством строк, в каждой строке содержится номер строки, 2 <select> и 2 <input> как с помощью JavaScript можно получить все значения в переменную , чтобы в дальнейшем эти данные вставить в гугл таблицу ?

<table id="table">
  <tbody>
    <tr>
      <th class="col-1">№</th>
      <th class="col-2">Вид работы</th>
      <th class="col-3">Населенный пункт</th>
      <th class="col-4">Кол-во</th>
      <th class="col-5">Примечание</th>
    </tr>
  </tbody>
  <tr>
    <td>1</td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td><input></td>
    <td><input></td>
  </tr>
</table>

javascript html google-spreadsheet
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

как с помощью JavaScript можно получить все значения в переменную

Предложу такой вариант... Если нажать на кнопку - можно в консоли посмотреть полученные данные.

document.querySelector('button').addEventListener('click', _ => {
  const arr = []
  document.querySelectorAll('#data tr').forEach(o => {
    const oc = o.querySelectorAll('td')
    const obj = {
      n: oc[0].textContent,
      type: oc[1].querySelector('select').value,
      sity: oc[2].querySelector('select').value,
      count: oc[3].querySelector('input').value,
      text: oc[4].querySelector('input').value
    }
    arr.push(obj)
  })
  console.log(arr)
})
<button>Тест</button>
<table id="table">
  <tbody>
    <tr>
      <th class="col-1">№</th>
      <th class="col-2">Вид работы</th>
      <th class="col-3">Населенный пункт</th>
      <th class="col-4">Кол-во</th>
      <th class="col-5">Примечание</th>
    </tr>
  </tbody>
  <tbody id='data'>
  <tr>
    <td>1</td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td><input></td>
    <td><input></td>
  </tr>
  <tr>
    <td>2</td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td>
      <select>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
      </select>
    </td>
    <td><input></td>
    <td><input></td>
  </tr>
  </tbody>
</table>