[英]How to convert HTML table with select and input to json and back again
我有以下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=">">GREATER THAN</option>
<option value="<">LESS THAN</option>
<option value=">=">GREATER THAN OR EQUAL TO</option>
<option value="<=">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=">">GREATER THAN</option>
<option value="<">LESS THAN</option>
<option value=">=">GREATER THAN OR EQUAL TO</option>
<option value="<=">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=">">GREATER THAN</option>
<option value="<">LESS THAN</option>
<option value=">=">GREATER THAN OR EQUAL TO</option>
<option value="<=">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=">">GREATER THAN</option>
<option value="<">LESS THAN</option>
<option value=">=">GREATER THAN OR EQUAL TO</option>
<option value="<=">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=">">GREATER THAN</option>
<option value="<">LESS THAN</option>
<option value=">=">GREATER THAN OR EQUAL TO</option>
<option value="<=">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'
}
}
將其存儲為數組的集合,您可以循環遍歷以重建表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(...);
});
我認為這段代碼會將您的值放入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);
。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.