2

jsFiddleに次のデモがあります。javascriptを使用してこのフォームを送信し、JSONオブジェクトをコントローラーに送り返したいと思います。

ご覧のとおり、複数の行をテーブルに追加して送信できます。私のJSONデータでは、どのチェックボックスがどの行でクリックされたかを追跡したいと思います。したがって、たとえば、以下のスクリーンショットに基づいて：

ここに画像の説明を入力してください

JSONオブジェクトを次のようにしたいと思います。

{light:[{red:on}, {yellow:off},{green:on}], dark:[{red:off}, {yellow:off},{green:on}]}...
4

3 に答える 3

3

私が思いついたコードは次のようになります。

var jsonObject = {};
$('.input-row').each(function(index, row) {
    var innerObject = {};
    $(':checkbox', row).each(function(index, checkbox) {
        innerObject[checkbox.name] = checkbox.checked ? 'on' : 'off';
    });
    var key = $('input[type="text"]', row).val();
    jsonObject[key] = innerObject;
});
console.log(jsonObject);
// use jsonObject somehow

全体的な JSON オブジェクト ( と呼ばれる) となる空のオブジェクトを作成していますjsonObject。

次に、入力の各行を反復処理します (input-row簡単に選択できるように、これらにクラスを追加しました)。

行ごとに、別の空のオブジェクト ( と呼ばれるinnerObject) を作成し、そのチェックボックスを反復処理します。チェックボックスごとに、プロパティを に追加しますinnerObject。キーはnameチェックボックスの属性/プロパティであり、値は状態に応じてonorです。最後に、その行の入力の値を取得して のキーとして使用し、それにプロパティを追加します。offcheckedtextjsonObject

上記のコードの実際の例を次に示します。

于 2013-02-19T15:29:21.930 に答える
1

The easiest way to serialize a form as JSON is to use jQuery's serializeArray()

JSON.stringify($('form').serializeArray());
于 2013-02-19T15:17:10.843 に答える
0

独自の JSON 文字列を作成してjQuery.parseJSON()から、これを使用してテーブル内のすべての tr 要素をループし、必要な情報を収集する必要があります。

以下のコードは、フィドラーの html に従って開始するためのものです。

var strJSON = '';

$("#blacklistgrid tr").each(function (i) { 
    if (i != 0) 
    { 
        var currentRow = $(this)
        strJSON += "{ " + currentRow.find("input[name='shade']").val() +"[{red: currentRow.find("input[name='red']").is(":checked")} ]   }";
    } 
});

var theJSON = jQuery.parseJSON(strJSON);

JSON 文字列の正しい形式を確認してください。コードが機能しているかどうかを確認できませんでしたが、ここでロジックを取得できます。

于 2013-02-19T15:34:25.967 に答える