我正在尝试从表中填充用户输入的内容。该表只有2列,如何从这些列获取输入?我要为每个项目列使用不同的变量吗?该表由控制行的滑块动态更改大小。这是我的桌子:
<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更好吗?此时我感觉就像在挖一个兔子洞。.
答案 0 :(得分: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());
});
运行此代码段以测试是否有效
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>
答案 1 :(得分:0)
首先,您应该定位input
以便映射值。
然后,由于类似$("#resultTable td:nth-child(2) input")
的jQuery查找返回了元素的jQuery集合,因此必须在映射之前对其应用.get()
,而不是在映射之后。
第三,在选择器中,td:nth-child(n)
不是从零开始的。
第四,在map()
中,参数是一个函数。该函数需要一个参数才能从中返回某些内容。请注意input
.map(function (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>