如何使用 jquery 创建具有来自动态创建的表单字段的值的多维数组？

Posted 2023-05-09

【中文标题】如何使用 jquery 创建具有来自动态创建的表单字段的值的多维数组？

【英文标题】：How to create a multidimensional array with values from dynamically created form fields, using jquery?

【发布时间】：2021-04-26 09:47:10

【问题描述】：

我有一个表单，我可以在其中一次动态添加三个字段。

这些字段都有不同的类名。

我想创建一个多维数组来存储这些字段的值。

数组需要如下所示：

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

);

有哪些方法可以做到这一点？

【参考方案1】：

jQuery 帮助函数.serializeArray() 可能是您的一个很好的起点。然后需要使用.reduce() 将生成的对象数组转换为您需要的格式。这里有一个小小提琴来演示一个可能的解决方案：

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">&#x2718;<td></tr>
</template>

（我的脚本创建了一个 array 对象。您在问题中请求的结果是一个 object，而不是一个数组。）