如何创建多组Array？解决当前代码仅生成单个数组的问题

你的代码目前把所有输入框的值合并成了一维数组，无法实现每行对应一个子数组的需求，核心问题有两个：

• HTML里多个元素重复使用id="firsttable"，违反了id必须唯一的HTML规范，会导致选择器逻辑混乱。
• 收集数据时没有按行分组，直接提取所有输入框的值，自然无法形成每行一个子数组的结构。

修改后的完整代码 #

HTML部分

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <td>Item</td>
            <td>Quantity</td>
            <td>Description</td>
        </tr>
    </thead>
    <tbody class="tbody">
        <tr>
            <td>
                <input type="text" name="Item" class="table-input" value required>
            </td>
            <td>
                <input type="number" name="Quantity" class="table-input" value required>
            </td>
            <td>
                <input type="text" name="Description" class="table-input" value required>
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>
                <button class="btn btn-primary item-add-onclick" id="addrow">Add</button>
            </td>
        </tr>
    </tfoot>
</table>

JavaScript部分

var itemarray;

// 监听输入变化，按行收集数据
$(document).on('change', ".tbody .table-input", function () {
    itemarray = $(".tbody tr").map(function() {
        // 遍历每一行，收集当前行的三个输入框值组成子数组
        return [$(this).find(".table-input").map(function() {
            return this.value;
        }).get()];
    }).get();
    console.log(itemarray);
});

// 添加新行
$(document).on('click', '.item-add-onclick', function () {
    var cols = `
        <tr>
            <td>
                <input type="text" name="Item" class="table-input" value required>
            </td>
            <td>
                <input type="number" name="Quantity" class="table-input" value required>
            </td>
            <td>
                <input type="text" name="Description" class="table-input" value required>
            </td>
        </tr>`;
    $(".tbody").append(cols);
});

关键修改说明 #

1. 替换重复ID为Class：把所有id="firsttable"改成class="table-input"，既符合HTML规范，又能精准选择每行内的输入框。
2. 按行分组收集数据：先遍历<tbody>中的每一行<tr>，对每行单独收集三个输入框的值，组成子数组，最终生成二维数组，正好匹配你想要的[[apple, 2, red and round], [orange,1, sweet]]格式。
3. 简化代码结构：优化了添加行的字符串拼接，让代码更易读。

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