如何将表行序列化为 json 对象

Posted

技术标签:

【中文标题】如何将表行序列化为 json 对象【英文标题】:How to serialize table row to json object 【发布时间】:2017-03-07 13:41:34 【问题描述】:

如何将表格序列化为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>

【问题讨论】:

我想这会解决你的问题***.com/questions/2240005/… 这个问题的答案没有显示从输入、文本区域和选择 tr 中的元素中获取 valeus。我询问了在结果 json 对象属性中返回它们的值 【参考方案1】:

您可以使用nth-child 选择器和n+2 来仅选择tr>=2:

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

但是,结果不会是一个对象数组,其中每个对象都是一行的对象。结果将是一个对象数组,其中每个选择/输入/文本区域本身就是一个对象。

您可以使用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>

【讨论】:

两个选项都返回具有名称和值属性的对象。如何获取具有 name、valuetostore、totaltype 属性的对象?【参考方案2】:

您可以使用 SerializeFromTable jQuery 插件序列化任何带有或不带有表单元素的表格。无需用&lt;form&gt; 标签包装表格。它很简单(其中 data-columnTitle 是您想要的 json/json 数组对象中的关键字段):

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

有关更多选项,请查看此链接:serializeFromTable Plugin。

【讨论】:

以上是关于如何将表行序列化为 json 对象的主要内容,如果未能解决你的问题,请参考以下文章

如何将属性序列化为 json 对象?

如何将java对象序列化/反序列化为javax.JSON

如何在 Ruby 中将对象序列化为 json

如何使用 Json.NET 将 XML 序列化为 JSON 对象

如何覆盖属性的 JSON 序列化,将值序列化为字符串而不是对象?

如何将 JSON 反序列化为正确类型的对象,而无需事先定义类型?