Jquery - Получение значений из входов внутри <td>в массив - PullRequest
Новая
       11

Jquery - Получение значений из входов внутри <td>в массив

0 голосов
/ 28 марта 2020

Я пытаюсь получить данные, заполненные пользователем из таблицы. В таблице есть только 2 столбца, как я могу получить данные из них? Я хочу иметь разные VAR для каждого столбца элементов? Таблица динамически изменяла размер с помощью ползунка, который управляет строками. Это моя таблица: 

<div id="table-gen">
            <p>Als je dezelfde herhaling doet voor alle sets, kan je slechts één waarde invullen: bvb. voor 4 sets
                slechts éénmaal 10 invoeren voor de herhalingen. Dit wordt dan automatisch 4 x 10.</p>
            <table id="resultTable" cellpadding="1" cellspacing="1" border="1">
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Hoeveelheid</th>
                    <th scope="col">Gewicht x KG</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
            </table>
        </div>

Вот как это выглядит: enter image description here

Я попробовал следующее: 

var col1_Array = $('#resultTable td:nth-child(1)').map(function () {
    return $(this).text();
}).get();

var col2_Array = $('#resultTable td:nth-child(2)').map(function () {
    return $(this).text();
}).get();

это только дает мне самый первый столбец и пустую строку. Я пытаюсь загрузить его в Firebase, что хорошо. За исключением первого столбца номер ошибки, после того, как я изменил размер моей таблицы, она почему-то не регистрируется.

enter image description here

function writeData(){
    firebase.database().ref("Exercise").set({
        nameExercise: exerciseName.value,
        setAm: setAmount,
        setReps:col1_Array,
        weight:col2_Array,

    })
}

Как мне лучше всего go за этим динамически меняющимся столом? Лучше ли восстановить эту таблицу в div? Я чувствую, что я копаю кроличью нору в этот момент ..

Ответы [ 2 ]

1 голос
/ 28 марта 2020

Добавьте классы HoeveelheidField и GewichtField к td's 

  <tr>
           <td>1</td>
           <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
           <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
  </tr>

, а затем, чтобы получить все значения 

function getData(){
$('#resultTable .HoeveelheidField > input ').each(function() {
  HoeveelheidArr.push($(this).val());
});
$('#resultTable .GewichtField > input').each(function() {
  Gewicht.push($(this).val());
});

Запустите этот фрагмент, чтобы проверить, работает ли он 

var HoeveelheidArr=[];
var Gewicht=[]
function getData(){
$('#resultTable .HoeveelheidField > input ').each(function() {
  HoeveelheidArr.push($(this).val());
});
$('#resultTable .GewichtField > input').each(function() {
  Gewicht.push($(this).val());
});
console.log(HoeveelheidArr);
console.log(Gewicht);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<table id="resultTable" cellpadding="1" cellspacing="1" border="1">
                <tr>
                    <th scope="col"></th>
                    <th scope="col">Hoeveelheid</th>
                    <th scope="col">Gewicht x KG</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td class="HoeveelheidField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                    <td class="GewichtField"><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1" ></td>
                </tr>
            </table>
            <button onclick="getData()">Get Data</button>
0 голосов
/ 28 марта 2020

Сначала вы должны нацелиться на input, чтобы отобразить значения.

Затем, поскольку jQuery lookup, как $("#resultTable td:nth-child(2) input"), возвращает коллекцию jQuery элементов, вы должны применить .get() на нем перед отображением ... Не после.

В-третьих, в селекторах td:nth-child(n) имеет значение , а не на основе нуля.

В-четвертых, в map(), аргумент является функцией. Эта функция нуждается в аргументе, чтобы вернуть что-то из нее. Обратите внимание на input в .map(function (input) {

Я сделал так, чтобы массивы обновлялись при изменении input ... Но я не знаю, имеет ли это отношение к вам. В любом случае , вы должны использовать событие для достижения этой цели. Также обратите внимание на использование Делегирование , так как ваша таблица динамически меняется ... 

var col1_Array, col2_Array;

$(document).on("change","#resultTable td input", function () {
  col1_Array = $("#resultTable td:nth-child(2) input")
    .get()
    .map(function (input) {
      return input.value;
    });
  col2_Array = $("#resultTable td:nth-child(3) input")
    .get()
    .map(function (input) {
      return input.value;
    });

  console.log(col1_Array, col2_Array);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="table-gen">
  <p>Als je dezelfde herhaling doet voor alle sets, kan je slechts één waarde invullen: bvb. voor 4 sets
    slechts éénmaal 10 invoeren voor de herhalingen. Dit wordt dan automatisch 4 x 10.</p>
  <table id="resultTable" cellpadding="1" cellspacing="1" border="1">
    <tr>
      <th scope="col"></th>
      <th scope="col">Hoeveelheid</th>
      <th scope="col">Gewicht x KG</th>
    </tr>
    <tr>
      <td>1</td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
    </tr>
    <tr>
      <td>2</td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
    </tr>
    <tr>
      <td>3</td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
      <td><INPUT TYPE="NUMBER" MIN="0" MAX="10" STEP="1"></td>
    </tr>
  </table>
</div>

CodePen

...