當用戶在我的 HTML 中輸入一個值時，我試圖將日期和部門資訊存盤到一個陣列中。當我查看控制臺時，我看到它被保存為 E.fn.init。這是我的 HTML 代碼：
<form>
<p><b>Date:</b><input id="date_out" type='date' required /></p>
<p><b>Department:</b><input id='department_out' type='text' required /></p>
<button class="btn btn-primary" type="submit" id='submit' >SUBMIT</button>
</form>
這是我的 Javascript 代碼：
let count = 1;
// Handler to Submit Data
$('#submit').click(() =>{
$('form').on('submit', function(e){
e.preventDefault();
const date_out = $("#date_out").val();
const department_out = $("#department_out").val();
let data = [];
// Iterate over all rows and store data
for (let i = 1; i <= count; i ){
// Skip Row if it was Removed
if (!$(`tr[index=${i}]`).length) continue;
// Store all Info from this row
let assetInfo = {
date_out: $(`#date_out${i}`).val(date_out),
department_out: $(`#department_out${i}`).val(department_out),
}
data.push(assetInfo);
console.log(data);
}
});
});
控制臺將陣列列印為；date_out：E.fn.init，department_out：E.fn.init。如何讓它保存用戶在陣列中輸入的任何內容？
uj5u.com熱心網友回復：
我不太確定您的 HTML 結構是什么，但據我了解，您有一個表格，并且您想將每一行存盤在資料中，我建議您這樣做：在我的名為depTable的表格中，我有每一行具有這樣的唯一 ID：
date_out_1
department_out_1
所以，當我想訪問它時，我只想創建一個簡單的ID，同時我可以獲得該表中有多少行，如下所示：
// Get ROW COUNT FROM TABLE
var count = $('#depTable tr').length;
現在，如果您在For回圈中組合，您將獲得所有ID
for (let i = 1; i <= count; i ){
var idDate = "#date_out_" i;
var idDep = "#department_out_" i;
}
這是我的所有代碼，希望我能幫助解決您的問題。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack21</title>
<script src="js/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="depTable">
<thead>
<tr>
<td>Date</td>
<td>Department</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="date_out_1" type='date' required />
</td>
<td>
<input id='department_out_1' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_2" type='date' required />
</td>
<td>
<input id='department_out_2' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_3" type='date' required />
</td>
<td>
<input id='department_out_3' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_4" type='date' required />
</td>
<td>
<input id='department_out_4' type='text' required />
</td>
</tr>
</tbody>
</table>
<Button onclick="storeUserData()">Test me</Button>
<script>
let data = [];
function storeUserData(){
// Get ROW COUNT FROM TABLE
var count = $('#depTable tr').length;
console.log("Row Count: " count)
for (let i = 1; i <= count; i ){
var idDate = "#date_out_" i;
var idDep = "#department_out_" i;
let assetInfo = {
date_out: $(idDate).val(),
department_out: $(idDep).val()
}
data.push(assetInfo);
}
console.log(data);
}
</script>
</body>
</html>
演示代碼在這里：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stack21</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- MY OFFLINE <script src="js/jquery-3.6.0.min.js"></script> -->
</head>
<body>
<table id="depTable">
<thead>
<tr>
<td>Date</td>
<td>Department</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input id="date_out_1" type='date' required />
</td>
<td>
<input id='department_out_1' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_2" type='date' required />
</td>
<td>
<input id='department_out_2' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_3" type='date' required />
</td>
<td>
<input id='department_out_3' type='text' required />
</td>
</tr>
<tr>
<td>
<input id="date_out_4" type='date' required />
</td>
<td>
<input id='department_out_4' type='text' required />
</td>
</tr>
</tbody>
</table>
<Button onclick="storeUserData()">Test me</Button>
<script>
let data = [];
function storeUserData(){
// Get ROW COUNT FROM TABLE
var count = $('#depTable tr').length;
console.log("Row Count: " count)
for (let i = 1; i <= count; i ){
var idDate = "#date_out_" i;
var idDep = "#department_out_" i;
let assetInfo = {
date_out: $(idDate).val(),
department_out: $(idDep).val()
}
data.push(assetInfo);
}
console.log(data);
}
</script>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447922.html
標籤：javascript html jQuery
上一篇：浮動右改變下一個元素的位置
下一篇：復選框懸停在錯誤的標簽上