Jquery-从 <td> 内的输入中获取值到数组中

Question

我正在尝试从表中获取用户填写的输入。该表只有 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>

这就是它的样子：

我尝试了以下方法：

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。除了第一列是默认编号外，在我更改表的大小后，它以某种方式没有注册。

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

    })
}

我怎样才能最好地绕过这个动态变化的表格？将此表重建为div会更好吗？我觉得我在这一点上挖了一个兔子洞..

Answer 1

将 HoeveelheidField 和 GewichtField 类添加到 td 中

  <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());
});

运行这个 sn-p 来测试它是否有效

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>

Answer 2

首先，您应该定位 input 以映射值。

然后，由于像 $("#resultTable td:nth-child(2) input") 这样的 jQuery 查找会返回一个 jQuery 元素集合，因此您必须在映射之前对其应用 .get()...而不是之后。

第三，在选择器中，td:nth-child(n)不是从零开始的。

第四，在map()中，参数是一个函数。该函数需要一个参数才能从中返回一些东西。注意.map(function (input) {中的input

我这样做是为了在input 更改时刷新数组...但我不知道这是否与您有关。 无论如何，您应该使用事件来实现这一点。还要注意delegation 的使用，因为您的表格是动态变化的...

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