如何使用JQuery获取二维数组结构的隐藏输入框数据？

我的输入字段是通过模板生成的hidden输入，结构如下：

<input type="hidden"  name="data[{{ $parentIndex }}][{{ $index }}]" value="{{ $value }}">

生成后的示例HTML如下：

<input type="hidden"  name="data[0][0]" value="Name">
<input type="hidden"  name="data[0][1]" value="contact_email">
<input type="hidden"  name="data[0][2]" value="phone number">
<input type="hidden"  name="data[0][3]" value="contact_location">
<input type="hidden"  name="data[0][4]" value="">
<input type="hidden"  name="data[1][0]" value="John Doe">
<input type="hidden"  name="data[1][1]" value="john.doe@example.com">
<input type="hidden"  name="data[1][2]" value="15551-234567">
<input type="hidden"  name="data[1][3]" value="New York, NY">
<input type="hidden"  name="data[1][4]" value="230">
<input type="hidden"  name="data[2][0]" value="Jane Smith">
<input type="hidden"  name="data[2][1]" value="jane.smith@example.com">
<input type="hidden"  name="data[2][2]" value="15552345678">
<input type="hidden"  name="data[2][3]" value="Los Angeles, CA">
<input type="hidden"  name="data[2][4]" value="5201">
<input type="hidden"  name="data[3][0]" value="Robert Johnson">
<input type="hidden"  name="data[3][1]" value="robert.johnson@example.com">
<input type="hidden"  name="data[3][2]" value="8.80156E+13">
<input type="hidden"  name="data[3][3]" value="Chicago, IL">
<input type="hidden"  name="data[3][4]" value="4110">

我尝试用以下代码获取数据，返回空数组：

var data = $('input[name="data[]"]').map(function () {
    return $(this).val();
}).get();

又试了另一段代码，但得到的是一维数组，不是预期的二维结构：

var data = $("input[name^='data']").map(function () { return $(this).val(); }).get();

请问如何正确获取这种二维数组结构的输入数据？

你需要解析每个input的name属性，提取其中的父索引和子索引，再把对应的值放到二维数组的对应位置。可以用正则表达式匹配name里的索引，然后构建数组：

var data = [];
// 选中所有name以data开头的hidden输入
$("input[name^='data']").each(function() {
    // 用正则提取name中的两个数字索引
    var indexMatch = this.name.match(/data\[(\d+)\]\[(\d+)\]/);
    if (indexMatch) {
        var parentIdx = parseInt(indexMatch[1], 10);
        var childIdx = parseInt(indexMatch[2], 10);
        // 初始化父级数组（如果尚未创建）
        if (!data[parentIdx]) {
            data[parentIdx] = [];
        }
        // 将值存入对应位置
        data[parentIdx][childIdx] = $(this).val();
    }
});

console.log(data);

代码说明： #

• 用name^='data'选择器精准定位所有目标输入框；
• 正则表达式/data\[(\d+)\]\[(\d+)\]/可以匹配data[X][Y]格式的name属性，提取出X和Y两个数字索引；
• 先判断父级数组是否存在，不存在则初始化，避免数组下标越界；
• 最终得到的data就是和输入结构完全对应的二维数组，比如data[0]是表头数组，data[1]、data[2]等为各行数据。

如果你的索引存在不连续的情况，或者需要过滤空项，可以在最后添加一行data = data.filter(item => item !== undefined);来清理数组。

内容的提问来源于stack exchange，提问作者Hola