从循环JavaScript中的输入创建数组

Create arrays from input in a cycle JavaScript

本文关键字：输入 创建 数组 循环 JavaScript      更新时间：2023-09-26

我目前正在将手风琴中的用户输入保存为数组。

我的手风琴是动态的，点击后，会创建另一个带有输入字段的手风琴列：

var i = 1 ;
        function AddPanel()
        {
        $('.accord').append('<h3 style="background:none;background-color:#C8C8C8  ;">Job Nr.'+i+'</h3>'
            +'<div style="background:none;background-color:#E0E0E0;">'
                +'<div>'
                    +'<form name="myForm">'
                        +'<table class="wrapper">'
                            +'<tr>'
                                +'<td style="text-align: left">First Digit:'
                                +'<div> <input type="text" name="Job['+i+'][0]" /></td>'
                                +'<td style="text-align: left">System:'      
                                +'<div> <input  type="text" name="Job['+i+'][1]" /></td>'
                                +'<td style="text-align: left">SAP Modul:'  
                                +'<div> <input  type="text" name="Job['+i+'][2]" /></td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td style="text-align: left">Country:' 
                                +'<div> <input  type="text" name="Job['+i+'][3]" /></td>'
                                +'<td style="text-align: left">Duration:' 
                                +'<div> <input  type="text" name="Job['+i+'][4]" /></td>'
                                +'<td style="text-align: left">Step Number:' 
                                +'<div> <input  type="text" name="Job['+i+'][5]" /></td>'
                            +'</tr>'
                            +'<tr>'
                                +'<td style="text-align: left">Optional Text:'
                                    +'<div>' 
                                    +'<textarea align="left" name="Job['+i+'][6]" cols="20" rows="2"></textarea>'
                                    +'</div>'
                                +'</td>'
                            +'</tr>'
                        +'</table>'
                    +'</form>'
                +'</div>'
            +'</div>')
        $('.accord').accordion("refresh"); 
        i++;
        }

从理论上讲，用户能够动态地将数百个输入输入到2d阵列中。

我现在的问题是：我如何能够存储并稍后检索cylce中2d数组的所有输入？

我试着撒谎。这是tborychowski建议的："

        var form = document.getElementsByName('myForm');
        field = form.elements['Job[0][0]'];
        formData = [], i = 0, j = 0;
        while (field) {
        formData[i] = [];
        j = 0;
        while (field) {
        formData[i].push(field.value);
        field = form.elements['Job[' + i + '][' + (++j) + ']'];
        }
        field = form.elements['Job[' + (++i) + '][0]'];
        }
        console.dir(formData);
        `

我尝试了很多不同的方法，并在谷歌上搜索了几个小时，但我无法让它发挥作用。

对不起，我真的是个初学者。

提前感谢！

我已经创建了一个演示（一个示例）来演示您可以做什么。基本思想（如果我理解正确的话）是使用循环索引命名表单字段，如下所示：

<input type="text" name="Job[0][0]"/>
<input type="text" name="Job[0][1]"/>

因此，第一个数字是组/集合索引，第二个字段是该组/集合中的索引。

Than-你只需要循环浏览这些字段，无论一个集合中有多少集合或字段，你都可以收集数组中的所有值，例如：

var form = document.getElementById('myForm'),
    field = form.elements['Job[0][0]'],
    formData = [], i = 0, j = 0;
while (field) {
    formData[i] = [];
    j = 0;
    while (field) {
        formData[i].push(field.value);
        field = form.elements['Job[' + i + '][' + (++j) + ']'];
    }
    field = form.elements['Job[' + (++i) + '][0]'];
}
console.dir(formData);

我在这里没有使用jquery（使用jquery会更容易）。

这就是你要找的吗？

DEMO

根据您的范围，您可以执行以下操作：

var a0 = 6, a1 = 5, a2 = 4, a3 = 2;
for (var i = 0; i < 4; i++) {
   console.log(window['a' + i]);
}

所以-如果window是变量所在的范围，那么可以像上面的例子一样使用它。

否则——如果这不可能——你可以创建一个值数组，而不是单独的变量，比如：

'<input  type="text" name="Job['+i+'][]" />'

如果你选择这种方法，我会做的是在包装器元素（包含同一索引的所有输入）中添加一个索引类（使jquery更容易），例如：

'<table class="inputs' + i + '">'+
   ---- inputs go here ----
'</table>'+

然后循环遍历它们并获得值，如下所示：

var jobs = [], idx = 0, inputs = $('.inputs' + idx);
while (inputs.length) {
    inputs.find('input[name^=Job]').function(index, inputField) {
        jobs[idx][].push($(inputField).val());
    });
    idx++;
    inputs = $('.inputs' + idx);
}
相关文章：