我正在尝试将HTML表格中的数据转换为JSON,以便可以在服务器端相应地处理它。我能够序列化数据,但结果充其量只能生成不直接链接的不同数据数组。 喜欢: 这是我正在使用的形式:
<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>
序列化数据的脚本是:
$("#nameGenderForm").submit(function(event){
event.preventDefault();
var rawData=$('#nameGenderForm').serializeFormJSON();
var formData=JSON.stringify(rawData);
console.log(formData);
});
serializeFormJSON()是我在浏览几页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:
{"studentName":["kenpachi","orihime"],"studentGender":["male","female"]}
我尝试了许多方法来获取名称 - 性别格式,但每种方式都会产生相同的结果。两个不同的数组。使用每个表单也无济于事。 有没有办法在名称 - 性别数组中获取数据:
{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}
请告知。
答案 0 :(得分:5)
Here you go with demo,稍作修改:
循环遍历每个表行,找到input,textarea和select type元素,将它们序列化,转换为object然后推送到数组。
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 的新函数,因此请确保在代码中也包含该函数。
$。toDictionary function
(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);
答案 1 :(得分:0)
给他们相同的名字,但作为一个数组
例如
name="first[studentName]" and name="first[studentGender]"
然后是你的第二个输入
name="second[studentName]" and name="second[studentGender]"
此外,也许serializeArray会有所帮助。
答案 2 :(得分:0)
我会做类似this jsFiddle的事情 - 也就是说,循环遍历每一行并从输入中收集数据,然后将每个对象推送到结果数组中。
您可能希望在输入上使用class
,因为它可能比通过当前非常繁琐的:input[name=xyz]
选择器查找更快。
答案 3 :(得分:0)
function tableToArray(table) {
var headers = [];
var data = []; // first row needs to be headers var headers = [];
for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}
// go through cells
for (var i = 1; i < table.rows.length; i++) {
var tableRow = table.rows[i]; var rowData = {};
for (var j = 0; j < tableRow.cells.length; j++) {
rowData[headers[j]] = tableRow.cells[j].innerHTML;
} data.push(rowData);
}
return data;
}
function tableToJson(table) {
var headers = [];
var data = '{[';
for (var i = 0; i < table.rows[0].cells.length; i++) {
headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}
for (var i = 1; i < table.rows.length; i++) {
var tableRow = table.rows[i]; var rowData = {};
for (var j = 0; j < tableRow.cells.length; j++) {
rowData[headers[j]] = tableRow.cells[j].innerHTML;
} data = (data + JSON.stringify(rowData) + ",");
}
return data.slice(0, -1) + "]}";
}