1

次の html テーブルがあります。このテーブルには、それぞれテキスト付きの td、select、および input[type='text'] を含む行と列があります。また、テーブルから行を削除するための最後の td が各行にあり、テーブルの行を json として保存することとは無関係であり、無視できます。

   <table id="columnsTable" class="table white-table table-bordered table-hover table-striped">
    <thead>
        <tr>
            <th>Column</th>
            <th>Condition</th>
            <th>Value</th>
            <th></th>
        </tr>
    </thead>
    <tbody id="columnsTableBody">
        <tr id="StudentInfo.FirstName" class="StudentInfo.FirstName" name="StudentInfo.FirstName">
            <td>FirstName</td>
            <td>
                <select id="StudentInfo.FirstName-condition">
                    <option value="LIKE">CONTAINS</option>
                    <option value="=">EQUALS</option>
                    <option value="!=">NOT EQUAL</option>
                    <option value="&gt;">GREATER THAN</option>
                    <option value="&lt;">LESS THAN</option>
                    <option value="&gt;=">GREATER THAN OR EQUAL TO</option>
                    <option value="&lt;=">LESS THAN OR EQUAL TO</option>
                </select></td>
            <td>
                <input type="text" id="StudentInfo.FirstName-value" class="required" title="Value is required"></td>
            <td>
                <label>
                    <input type="checkbox" id="StudentInfo.FirstName-checkbox"></label></td>
        </tr>
        <tr id="StudentInfo.LastName" class="StudentInfo.LastName" name="StudentInfo.LastName">
            <td>LastName</td>
            <td>
                <select id="StudentInfo.LastName-condition">
                    <option value="LIKE">CONTAINS</option>
                    <option value="=">EQUALS</option>
                    <option value="!=">NOT EQUAL</option>
                    <option value="&gt;">GREATER THAN</option>
                    <option value="&lt;">LESS THAN</option>
                    <option value="&gt;=">GREATER THAN OR EQUAL TO</option>
                    <option value="&lt;=">LESS THAN OR EQUAL TO</option>
                </select></td>
            <td>
                <input type="text" id="StudentInfo.LastName-value" class="required" title="Value is required"></td>
            <td>
                <label>
                    <input type="checkbox" id="StudentInfo.LastName-checkbox"></label></td>
        </tr>
        <tr id="StudentInfo.CurrentCollege" class="StudentInfo.CurrentCollege" name="StudentInfo.CurrentCollege">
            <td>CurrentCollege</td>
            <td>
                <select id="StudentInfo.CurrentCollege-condition">
                    <option value="LIKE">CONTAINS</option>
                    <option value="=">EQUALS</option>
                    <option value="!=">NOT EQUAL</option>
                    <option value="&gt;">GREATER THAN</option>
                    <option value="&lt;">LESS THAN</option>
                    <option value="&gt;=">GREATER THAN OR EQUAL TO</option>
                    <option value="&lt;=">LESS THAN OR EQUAL TO</option>
                </select></td>
            <td>
                <input type="text" id="StudentInfo.CurrentCollege-value" class="required" title="Value is required"></td>
            <td>
                <label>
                    <input type="checkbox" id="StudentInfo.CurrentCollege-checkbox"></label></td>
        </tr>
        <tr id="StudentInfo.EmailAddress" class="StudentInfo.EmailAddress" name="StudentInfo.EmailAddress">
            <td>EmailAddress</td>
            <td>
                <select id="StudentInfo.EmailAddress-condition">
                    <option value="LIKE">CONTAINS</option>
                    <option value="=">EQUALS</option>
                    <option value="!=">NOT EQUAL</option>
                    <option value="&gt;">GREATER THAN</option>
                    <option value="&lt;">LESS THAN</option>
                    <option value="&gt;=">GREATER THAN OR EQUAL TO</option>
                    <option value="&lt;=">LESS THAN OR EQUAL TO</option>
                </select></td>
            <td>
                <input type="text" id="StudentInfo.EmailAddress-value" class="required" title="Value is required"></td>
            <td>
                <label>
                    <input type="checkbox" id="StudentInfo.EmailAddress-checkbox"></label></td>
        </tr>
        <tr id="StudentInfo.Status" class="StudentInfo.Status" name="StudentInfo.Status">
            <td>Status</td>
            <td>
                <select id="StudentInfo.Status-condition">
                    <option value="LIKE">CONTAINS</option>
                    <option value="=">EQUALS</option>
                    <option value="!=">NOT EQUAL</option>
                    <option value="&gt;">GREATER THAN</option>
                    <option value="&lt;">LESS THAN</option>
                    <option value="&gt;=">GREATER THAN OR EQUAL TO</option>
                    <option value="&lt;=">LESS THAN OR EQUAL TO</option>
                </select></td>
            <td>
                <input type="text" id="StudentInfo.Status-value" class="required" title="Value is required"></td>
            <td>
                <label>
                    <input type="checkbox" id="StudentInfo.Status-checkbox"></label></td>
        </tr>
    </tbody>
</table>

次の形式で行を JSON として保存するにはどうすればよいですか? ループバックして、JSON からテーブル行を再構築できるようにします。

columns: {
    StudentInfo.FirstName: {
       condition: 'CONTAINS',
       value: 'Carl'
    }
    StudentInfo.LastName: {
        condition: 'EQUALS',
        value: 'W'
    }
}
4

2 に答える 2

1

テーブルhtmlを再構築するためにループできる配列のコレクションとして保存します。これにより、メモリ使用量も削減されます。そして、理想的にはテーブルの行であるため、rows代わりに名前を変更する必要があると思います。columns

rows: [
    ['FirstName',  'CONTAINS',  'Carl'],
    ['LastName',  'EQUALS',  'W'],
];

使用法：

var $table = $('tableSelector');
$.each(rows, function(i, obj){
   //Now use obj which is again an array and create the required html
   $table.append(...);
});
于 2013-01-10T20:18:41.910 に答える
0

このコードはあなたの値をJSオブジェクトに取り込むと思います。私はそれをテストしていません

 var tbody = $("#columnsTable tbody");

var StudentInfo = {
    "FirstName" : {
        "title" : "FirstName", 
        "condition" : tbody.find("select[id='StudentInfo.FirstName-condition'] option:selected").val(), 
        "value" : tbody.find("input[id='StudentInfo.FirstName-value']").val(), 
        "checked" : (tbody.find("input[id='StudentInfo.FirstName-checkbox']:checked").length > 0)
    }, 
    "LastName" : {
        "title" : "LastName", 
        "condition" : tbody.find("select[id='StudentInfo.LastName-condition'] option:selected").val(), 
        "value" : tbody.find("input[id='StudentInfo.LastName-value']").val(), 
        "checked" : (tbody.find("input[id='StudentInfo.LastName-checkbox']:checked").length > 0)
    }, 
    "CurrentCollege" : {
        "title" : "CurrentCollege", 
        "condition" : tbody.find("select[id='StudentInfo.CurrentCollege-condition'] option:selected").val(), 
        "value" : tbody.find("input[id='StudentInfo.CurrentCollege-value']").val(), 
        "checked" : (tbody.find("input[id='StudentInfo.CurrentCollege-checkbox']:checked").length > 0)
    }, 
    "EmailAddress" : {
        "title" : "EmailAddress", 
        "condition" : tbody.find("select[id='StudentInfo.EmailAddress-condition'] option:selected").val(), 
        "value" : tbody.find("input[id='StudentInfo.EmailAddress-value']").val(), 
        "checked" : (tbody.find("input[id='StudentInfo.EmailAddress-checkbox']:checked").length > 0)
    }, 
    "Status" : {
        "title" : "Status", 
        "condition" : tbody.find("select[id='StudentInfo.Status-condition'] option:selected").val(), 
        "value" : tbody.find("input[id='StudentInfo.Status-value']").val(), 
        "checked" : (tbody.find("input[id='StudentInfo.Status-checkbox']:checked").length > 0)
    },
};

オブジェクトのIDとクラス名にピリオドを使用しているので、jQueryでは問題が発生すると思います。上記のコードでは、ピリオドに問題がないセレクターを使用しました。

編集

一部のセレクターを修正しました

編集2

これを使用する限り：alert(StudentInfo.CurrentCollege.condition);。

于 2013-01-10T20:32:09.610 に答える