嵌套表格内的表单元素无法提交数据，请求技术协助

问题根源 #

你动态生成的是<input type='button'>元素，这类控件不会被表单的serializeArray()方法收集——表单序列化仅针对用于提交数据的控件（如text、hidden、checkbox、radio等），button类型的输入仅用于触发交互，默认不参与表单数据提交，哪怕添加了value属性也没用，所以formData返回空数组。

解决方案 #

方案一：用隐藏输入+模拟按钮（推荐） #

将button替换为hidden输入（负责提交数据），同时用带样式的div模拟按钮交互，既保留原有视觉和操作逻辑，又能让表单正常收集数据。

修改populate函数中创建控件的代码：

// 替换原按钮创建代码
$(newCell).append(`
  <input type="hidden" name="${position}" value="on" form="display">
  <div class="btn on" data-position="${position}"></div>
`);

// 绑定点击事件到模拟按钮
$(newCell.find('.btn')).click(function () {
    let inputType = $("input:checked").val();
    let hiddenInput = $(`input[name="${$(this).data('position')}"]`);
    
    if (inputType == "lights" && !$(this).hasClass("wall")) {
        $(this).toggleClass("on off");
        hiddenInput.val($(this).hasClass('on') ? 'on' : 'off');
    } else if (inputType == "walls") {
        $(this).toggleClass("wall");
        // 同步墙状态到隐藏输入
        const currentState = $(this).hasClass('wall') ? 'wall' : ($(this).hasClass('on') ? 'on' : 'off');
        hiddenInput.val(currentState);
    }
});

在CSS中添加模拟按钮的样式（与原按钮样式保持一致）：

.btn {
    width: 1.5em;
    height: 1.5em;
    font-size: inherit;
    margin-bottom: 0.1em;
    margin-left: 0.1em;
    padding: 0;
    cursor: pointer;
}
.btn.on {
    background-color: var(--inputBg);
    border: var(--border);
}
.btn.off {
    background-color: darkgrey;
    border: 2px solid grey;
}
.btn.wall {
    background-color: transparent;
    border: 2px solid transparent;
}

方案二：提交时手动收集状态 #

如果不想修改DOM结构，可以在表单提交时遍历所有按钮，手动提取状态并组装成数据：

$("#display").submit(function (e) {
    e.preventDefault();
    
    const formData = [];
    // 遍历所有按钮控件
    $('#display table input[type="button"]').each(function() {
        const $btn = $(this);
        let value;
        if ($btn.hasClass('wall')) {
            value = 'wall';
        } else {
            value = $btn.hasClass('on') ? 'on' : 'off';
        }
        formData.push({
            name: $btn.attr('name'),
            value: value
        });
    });
    
    console.log(formData);
});

这种方法无需调整DOM，但要确保每个按钮的name属性正确，且状态判断逻辑与交互逻辑一致。

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