我正在嘗試從表中獲取用戶填寫的輸入。該表只有 2 列，如何從中獲取輸入？我想為每一列項(xiàng)目都有不同的變量？表格通過控制行的滑塊動(dòng)態(tài)改變大小。這是我的桌子：<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();這只給了我第一列和一個(gè)空字符串。我嘗試將其上傳到 firebase ，進(jìn)展順利。除了第一列是默認(rèn)數(shù)字之外，在我更改表格的大小后，它不知何故沒有注冊(cè)。function writeData(){ firebase.database().ref("Exercise").set({ nameExercise: exerciseName.value, setAm: setAmount, setReps:col1_Array, weight:col2_Array, })}我怎樣才能最好地繞過這個(gè)動(dòng)態(tài)變化的表？把這個(gè)表重構(gòu)為div是不是更好？我感覺我現(xiàn)在正在挖一個(gè)兔子洞..
1 回答
慕田峪9158850
TA貢獻(xiàn)1794條經(jīng)驗(yàn) 獲得超7個(gè)贊
將類 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());
});
運(yùn)行此代碼片段來測(cè)試它是否有效
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 關(guān)注
- 134 瀏覽
添加回答
舉報(bào)
0/150
提交
取消