3

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"]}

名前と性別の形式でそれらを取得するために多くの方法を試しましたが、どの方法でも同じ結果が得られます。2つの異なる配列。それぞれにフォームを使用しても役に立ちませんでした。次のようにname-gender配列のデータを取得する方法はありますか？

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

お知らせ下さい。

4

4 に答える 4

5

ここでは、デモを行い、以下に示すわずかな変更を加えました。

各テーブル行をループし、input、textarea、select type要素を見つけ、それらをシリアル化し、オブジェクトに変換してから配列にプッシュしました。

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

PSはtoDictionaryという名前のjqueryライブラリに新しい関数を追加したので、それもコードに含めるようにしてください。

$.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);
于 2012-09-26T14:14:05.680 に答える
0

このjsFiddleのようなことをします。つまり、各行をループして入力からデータを収集し、各オブジェクトを結果の配列にプッシュします。

現在かなり面倒なセレクターclassを介して検索するよりも高速である可能性が高いため、代わりに入力でaを使用することをお勧めします。:input[name=xyz]

于 2012-09-26T13:51:21.597 に答える
0

それらに同じ名前を付けますが、配列として

例えば

name="first[studentName]" and name="first[studentGender]"

次に、2番目の入力用

name="second[studentName]" and name="second[studentGender]"

また、serializeArrayが役立つかもしれません。

于 2012-09-26T13:15:13.007 に答える
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) + "]}";
                }
于 2018-04-23T07:18:01.273 に答える