如何將HTML表格與選擇和輸入到JSON和返回

我有以下的HTML表格，其中包含行和列，每個包含與文本，選擇和輸入[類型='文本']的TD。每行的最後一個td用於從表中刪除行，並且與將錶行保存爲json無關並且可以忽略。如何將HTML表格與選擇和輸入到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' 
    } 
}

來源

2013-01-10 Carl Weis

將其存儲爲數組的集合，您可以循環以重建表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-10 20:18:41 ShankarSangoli

謝謝，那就是我正在尋找的......現在只是想弄清楚如何遍歷行並獲得我需要的每個子數組的值。 –

'obj [0] =>「FirstName」，obj [1] =>「CONTAINS」...用於第一次迭代。爲了更好的可讀性，你可以定義以你的orignal JSON對象字段命名的常量：'NAME = 0，CONDITION = 1，VAL = 2'，所以你使用'obj [VAL]'。（第一步持有「卡爾」） – yoshi

我覺得這個代碼將得到您的值轉換爲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-10 20:32:09 jwatts1980

如何將HTML表格與選擇和輸入到JSON和返回

回答

相關問題