jquery – 将表数据转换为JSON

我试图将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"]}

我尝试了许多方法来使它们以名称 – 性别格式获得,但每种方式都会产生相同的结果.两个不同的数组.使用每种形式也没有帮助.
有没有办法在name-gender数组中获取数据,如下所示：

{"studentName":"kenpachi","studentGender":"male"},{"studentName":"orihime","studentGender":"female"}

请指教.

解决方法

Here you go with demo,稍作修改如下：

循环遍历每个表行,找到输入,textarea和选择类型元素,序列化它们,转换为对象然后推送到数组.

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);
        }
    });

附：在jquery库中添加了一个名为toDictionary的新函数,因此请确保在代码中也包含该函数.

$.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);

原文地址：https://www.jb51.cc/jquery/181378.html