如何使用 jquery 使用动态创建的表单字段的值创建多维数组?
How to create a multidimensional array with values from dynamically created form fields, using jquery?
我有一个表单,可以一次动态添加三个字段。
这些字段每个都有不同的 class 名称。
我想创建一个多维数组来存储这些字段的值。
数组需要如下所示:
var working_days = {
0: {
'workday': data,
'from': data,
'till': data
},
1: {
'workday': data,
'from': data,
'till': data
},
2: {
'workday': data,
'from': data,
'till': data
},
//etc.
};
可能使用数组推送?
这是我目前的代码:
$('body').on('click','.createItem', function() {
var working_days = {}
console.log(values);
$('input.startTime').each(function() {
var startTime = $(this).val();
});
$('input.endTime').each(function() {
var endTime = $(this).val();
});
$('select.day').each(function() {
var day = $(this).val();
});
});
有哪些可行的方法?
jQuery 辅助函数 .serializeArray()
可能是您的一个很好的起点。然后需要使用 .reduce()
将生成的对象数组转换为您需要的格式。这里有一点 fiddle 来演示一个可能的解决方案:
const names={startTime:"from",endTime:"till"};
function addTimes(tblsel){
$(tblsel).append($("#timegrp").html())
}
for (let n=6;n--;) addTimes("#times table");
$("#times").on("click",".rmv",function(){this.closest("tr").remove()});
$("#add").click(ev=>addTimes("#times table"));
$("#chk").click(ev=>{
const res=$("#times").serializeArray().reduce((a,e)=>{
if (e.name=="day") a.push({workday:e.value});
else names[e.name] && (a[a.length-1][names[e.name]]=e.value);
return a;
},[]);
console.log(res);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">add workday</button>
<button id="chk">check times</button>
<form id="times">
<table></table>
</form>
<template id="timegrp">
<tr><td><select name="day"><option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option></select></td>
<td><input type="time" name="startTime" value="08:30"></td>
<td><input type="time" name="endTime" value="17:00"></td>
<td class="rmv" title="remove">✘<td></tr>
</template>
( 我的脚本创建了对象的 array。你在问题中请求的结果是 object,而不是数组.)
我有一个表单,可以一次动态添加三个字段。
这些字段每个都有不同的 class 名称。
我想创建一个多维数组来存储这些字段的值。
数组需要如下所示:
var working_days = {
0: {
'workday': data,
'from': data,
'till': data
},
1: {
'workday': data,
'from': data,
'till': data
},
2: {
'workday': data,
'from': data,
'till': data
},
//etc.
};
可能使用数组推送?
这是我目前的代码:
$('body').on('click','.createItem', function() {
var working_days = {}
console.log(values);
$('input.startTime').each(function() {
var startTime = $(this).val();
});
$('input.endTime').each(function() {
var endTime = $(this).val();
});
$('select.day').each(function() {
var day = $(this).val();
});
});
有哪些可行的方法?
jQuery 辅助函数 .serializeArray()
可能是您的一个很好的起点。然后需要使用 .reduce()
将生成的对象数组转换为您需要的格式。这里有一点 fiddle 来演示一个可能的解决方案:
const names={startTime:"from",endTime:"till"};
function addTimes(tblsel){
$(tblsel).append($("#timegrp").html())
}
for (let n=6;n--;) addTimes("#times table");
$("#times").on("click",".rmv",function(){this.closest("tr").remove()});
$("#add").click(ev=>addTimes("#times table"));
$("#chk").click(ev=>{
const res=$("#times").serializeArray().reduce((a,e)=>{
if (e.name=="day") a.push({workday:e.value});
else names[e.name] && (a[a.length-1][names[e.name]]=e.value);
return a;
},[]);
console.log(res);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">add workday</button>
<button id="chk">check times</button>
<form id="times">
<table></table>
</form>
<template id="timegrp">
<tr><td><select name="day"><option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option></select></td>
<td><input type="time" name="startTime" value="08:30"></td>
<td><input type="time" name="endTime" value="17:00"></td>
<td class="rmv" title="remove">✘<td></tr>
</template>
( 我的脚本创建了对象的 array。你在问题中请求的结果是 object,而不是数组.)