将表数据转换为JSON [英] Converting table data into JSON
问题描述
我正在尝试将HTML表中存在的数据转换为JSON,以便可以在服务器端进行相应的处理.我可以序列化数据,但是结果充其量只能生成不直接链接的独特数据数组. 喜欢: 这是我正在使用的表格:
I am trying to convert data present in a HTML table into JSON so that it could be processed accordingly on the server side. I am able to serialize the data, but the results, at best, generate distinct arrays of data which aren't linked directly. Like: This is the form I am using:
<form id="nameGenderForm">
<table id="nameGenderTable">
<tr>
<th >Name</th>
<th >Gender</th>
</tr>
<tr>
<td><input type="text" name="studentName"></td>
<td>
<select name="studentGender">
<option value="male">male</option>
<option value="female">female</option>
</select>
</td>
</tr>
<tr>
<td><input type="text" name="studentName"></td>
<td>
<select name="studentGender">
<option value="male">male</option>
<option value="female">female</option>
</select>
</td>
</tr>
</table>
<input type="submit" />
</form>
用于序列化数据的脚本为:
The script to serialize the data is:
$("#nameGenderForm").submit(function(event){
event.preventDefault();
var rawData=$('#nameGenderForm').serializeFormJSON();
var formData=JSON.stringify(rawData);
console.log(formData);
});
serializeFormJSON()是我经过StackOverFlow几页后得到的:
serializeFormJSON() is what I got after going through few pages of StackOverFlow:
(function($) {
$.fn.serializeFormJSON = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
})(jQuery);
通过使用所有这些,我可以获得类似以下的JSON:
By using all these I am able to get a JSON something like this:
{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}
我尝试了多种方法来以性别名称格式获取它们,但是每种方法都会产生相同的结果.两个不同的数组.对每个人使用表单也无济于事. 有什么办法可以像这样在name-gender数组中获取数据:
I tried many ways to get them in a name-gender format but every way yields the same result. Two distinct arrays. Using form for each didn't help either. Is there any way to get the data in name-gender array like this:
{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}
请告知.
推荐答案
在这里进行演示 ,做了一些细微的修改,如下所示:
Here you go with demo, made slight changes pointed below:
遍历每个表行,找到输入,文本区域和选择类型元素,对其进行序列化,转换为对象,然后推入数组.
looped over each table row, and found input, textarea and select type elements, serialized them, converted to object and then pushed to an array.
var o = [];
$(this).find('tr').each(function() {
var $this = $(this);
var $elements = $this.find('input, textarea, select')
if ($elements.size() > 0) {
var serialized = $elements.serialize();
var item = $.toDictionary( serialized );
o.push(item);
}
});
P.S.在jquery库中添加了一个名为 toDictionary 的新函数,因此请确保也将其包含在代码中.
P.S. added a new function to jquery library named toDictionary, so make sure you include that in your code as well.
$.toDictionary函数
(function($) {
$.extend({
toDictionary: function(query) {
var parms = {};
var items = query.split("&"); // split
for (var i = 0; i < items.length; i++) {
var values = items[i].split("=");
var key = decodeURIComponent(values.shift());
var value = values.join("=")
parms[key] = decodeURIComponent(value);
}
return (parms);
}
})
})(jQuery);
这篇关于将表数据转换为JSON的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!