如何使用 jQuery 从表中创建数据数组？

Question

我有一个表格。

<form id="form_step" action="form_stepb.php" method="post">

我有一张桌子。 假设它看起来像这样：

<table class="data_table">
    <tr>
        <th>Header One:</th>
        <th>Header Two:</th>
        <th>Header Three:</th>
        <th>Header Four:</th>
    </tr>
    <tr class="data_subrow">
        <td>
            <select class="subrow_type">
                <option value="choice_a">Choice A</option>
                <option value="choice_b">Choice B</option>
            </select>
        </td>
        <td><input type="text" class="phone" value=""> </td>
        <td><input type="text" class="phone_two" value=""></td>
        <td><input type="text" class="email" value=""></td>
    </tr>
</table>

假设该表能够将克隆行添加到表的底部。 所以提交时你可以有 2,3,4 行等等。

在我提交表单之前，我想通过每一行 go，收集数据，并制作一个数组，该数组变成 JSON，因此数据库将 JSON 保存在数据表中。

我正在尝试这样做：

$('#form_step').submit(function() {
    $('.data_table > tr.data_subrow').each(function() {
             
    });
});

我一直在阅读、搜索等。但我需要知道如何从每一行中获取值（在下拉列表中选择，从输入中选择文本）并使每一行成为数组/对象的一部分。

有人可以给我一些指导吗？

Answer 1

您可以将 serializeArray() api 附加到“on”单击事件。

$("#submit").on("click", function(){
   var a = $("form").serializeArray();
});

Answer 2

所以，从积极的方面来说，我想通了。 如果您有动态元素，则必须将表单定位在更高级别。

$(document).on("submit", "#form_step", function() {

});

这样做可以让您定位整个表单中的任何内容，包括动态元素。 我觉得自己像个傻瓜一样忘记了这一点。