Задать вопрос
@maks78945
javascript

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

Доброй ночи, есть html таблица в которой при нажатии на кнопку добавляются новые строки, в каждой строке используется несколько Input для ввода данных, мне нужно вот эти данные записать в json, что бы каждая строка была как была отдельно, вот такого плана:
"0":{'111','222'},"1":{'333','444'} и.д.

Я нашёл пример, он он работает только со значениями которые прописаны между td, какое свойство мне использовать что бы получить значение input?

Вот сама функция которая вытаскивает все значения:
var x = {};
        [].forEach.call(document.querySelectorAll("tr"), function(el) {
            if (+el.getAttribute("data-new") >= 0) {
                let inn = (x[el.getAttribute("data-id")] = {});
                [].forEach.call(el.children, function(cell) {
                    inn[cell.getAttribute("data-name")] = cell.textContent;
                });
            }
        });
        var dataJSON = JSON.stringify(x);
        console.log(dataJSON);


как я понимаю нужно использовать вместо cell.textContent; другое свойство, подскажите пожалуйста, никак не получается решить
  • Вопрос задан
  • 2012 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
erge
@erge
Примус починяю
ну как же свойство children ?? которое в этом скрипте так же используется?
см. Свойство children

INPUT будет дочерним элементом TD поэтому все проще простого:
вместо
cell.textContent
использовать
cell.children[0].value

Upd:
<hmtl>
<style>
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}
</style>
<body>
<div id="app"></div>

<table>
  <tr data-new="1" data-id="1">
    <td data-name="cell_11"><input type="text" value="11"></td>
    <td data-name="cell_12"><input type="text" value="12"></td>
  </tr>
  <tr data-new="2" data-id="2">
    <td data-name="cell_21"><input type="text" value="21"></td>
    <td data-name="cell_22"><input type="text" value="22"></td>
  </tr>
</table>

<script>
var x = {};
[].forEach.call(document.querySelectorAll("tr"), function(el) {
  if (+el.getAttribute("data-new") >= 0) {
    let inn = (x[el.getAttribute("data-id")] = {});
    [].forEach.call(el.children, function(cell) {
      inn[cell.getAttribute("data-name")] = cell.children[0].value;
    });
  }
});
var dataJSON = JSON.stringify(x)
document.querySelector("#app").innerHTML = dataJSON;
</script>
</body>
</hmtl>


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

cell.getElementsByTagName("input")[0].value
Ответ написан
6 комментариев
6 комментариев
Пригласить эксперта
Ответы на вопрос 1
Stalker_RED
@Stalker_RED
Если таблицу обернуть в форму, то можно юзать FormData.

ну или просто вместо querySelectorAll("tr") используй querySelectorAll("tr input"), и вместо textContent value.
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
3д сцены
23 дек. 2024, в 04:30
10000 руб./за проект
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Ещё заказы