如何将表行序列化为JSON对象 [英] How to serialize table row to json object
本文介绍了如何将表行序列化为JSON对象的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何将表序列化为json数组，以便每个数组元素都包含代表一个表行的json对象:
How to serialize table to json array so that every array element contains json object representing one table row:
[
{ name: "variable1", valuetostore: "a-b", totaltype: "Lowest" },
{ name: "variable2", valuetostore: "c-d", totaltype: "Highest" }
]
我在下面尝试了代码，但这会产生具有名称和值属性的对象，并且数组中的成员多于表行中的成员.
I tried code below but this produces objects with name and value properties and there are more members in array than in table rows.
它还会序列化隐藏的第一行.这是用于添加行的模板行，不应放在结果中.
It serializes also first row which is hidden. It is template row for row adding and should not apper in result.
$(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>
推荐答案
您可以将nth-child选择器与n+2一起使用，以仅选择tr> = 2:
You can use the nth-child selector with n+2 to select only the tr>=2:
#myForm tbody tr:nth-child(n+2)
但是结果将不是对象数组，其中每个对象都是一行对象.结果将是一个对象数组，其中每个选择/输入/文本区域本身就是一个对象.
However the result will not be an array of objects where each object is an object of a row. The result will be an array of object where each select/input/textarea is an object by itself.
您可以使用trs上的each()功能遍历所有这些以获得预期的结果.
You can use each() function on the trs to go over all of them to get the expected result.
以下是两个选项的示例:
Here is an example for both options:
$(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>
这篇关于如何将表行序列化为JSON对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
