如何将表格行序列化为JSON对象

Question

如何将表格序列化为 JSON 数组，以便每个数组元素包含表示一个表行的 JSON 对象：

[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
{ name: "variable2", valuetostore: "c-d", totaltype: "Highest" }
]

我尝试了下面的代码，但它生成带有名称和值属性的对象，并且数组中的成员比表格行多。它还将隐藏的第一行序列化，这是用于添加行的模板行，不应出现在结果中。

$(function() {
  $("#btnShow").on("click", function() {
    console.log($("#myForm").serializeArray());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" name="name" value="variable2">
                </td>

                <td>
                  <textarea name="valuetostore">c-d</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" >Smallest</option>
                    <option value="Highest" selected>Biggers</option>
                  </select>
                </td>
              </tr>

            </tbody>
          </table>
          <button id="btnShow" type="button">
            Show
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

- Andrus

---

我认为这将解决你的问题：https://dev59.com/MXE95IYBdhLWcg3wmvGh - user6783030

这个问题的答案并没有展示如何从tr元素中获取input、textarea和select元素的值。我询问的是如何将它们的值返回到结果JSON对象属性中。 - Andrus

Answer 1

你可以使用 n+2 的 nth-child 选择器，仅选择tr>=2的行：

#myForm tbody tr:nth-child(n+2)

然而，结果将不是由每行对象组成的对象数组。而是由每个select/input/textarea本身组成的对象数组。

您可以在trs上使用each()函数来遍历它们以获得期望的结果。

以下是两种选项的示例：

$(function() {
  $("#btnShow1").on("click", function() {
    console.log($("#myForm tbody tr:nth-child(n+2) textarea,#myForm tbody tr:nth-child(n+2) input,#myForm tbody tr:nth-child(n+2) select").serializeArray());
  });

  $("#btnShow2").on("click", function() {
    var ar = [];
    $("#myForm tbody tr:nth-child(n+2)").each(function() {
      rowData = $(this).find('input, select, textarea').serializeArray();
      var rowAr = {};
      $.each(rowData, function(e, v) {
        rowAr[v['name']] = v['value'];
      });
      ar.push(rowAr);
    });
    console.log(ar)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="modal" id="reportVariables" tabindex="-1" role="dialog" aria-labelledby="reportVariablesLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <form id="myForm">
          <table class="table table-condensed table-striped" id="reportVariablesTable">
            <thead>
              <tr>
                <th>Name</th>
                <th>Value</th>
                <th>Calculate</th>
              </tr>
            </thead>
            <tbody>
              <!-- table contains one hidden rows which should not -->
              <tr style='display:none'>
                <td>
                  <input type="text" name="name">
                </td>

                <td>
                  <textarea name="valuetostore"></textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest">Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>

              <!-- other are data rows which should sent -->
              <tr>
                <td>
                  <input type="text" name="name" value="variable1">
                </td>

                <td>
                  <textarea name="valuetostore">a-b</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" selected>Smallest</option>
                    <option value="Highest">Biggers</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="text" name="name" value="variable2">
                </td>

                <td>
                  <textarea name="valuetostore">c-d</textarea>
                </td>

                <td>
                  <select class="totaltype-select" id="totaltype" name="totaltype">
                    <option value=""></option>
                    <option value="Sum">Summary</option>
                    <option value="Lowest" >Smallest</option>
                    <option value="Highest" selected>Biggers</option>
                  </select>
                </td>
              </tr>

            </tbody>
          </table>
          <button id="btnShow1" type="button">
            Options #1
          </button><br />
          <button id="btnShow2" type="button">
            Options #2
          </button>
        </form>

      </div>
    </div>
  </div>
</div>

- Dekel

---

两个选项都返回具有名称和值属性的对象。如何获取具有名称、valuetostore和totaltype属性的对象？ - Andrus

Answer 2

您可以使用SerializeFromTable jQuery插件对任何带有或不带有表单元素的表进行序列化。无需用<form>标签包装表格。只需简单地执行以下操作（其中data-columnTitle是您在json / json数组对象中想要的键字段）：

let tabledata = $("#example1").serializeFromTable({
                  columnNameBy:"data-columnTitle"
                });

如需更多选项，请查看此链接：serializeFromTable 插件。

- Lalitkumar.annaldas