首頁 > 開發者 > JavaScript
標籤：
一、JSON資料來源JSON解釋：
JSON是一種取代XML的資料結構,和xml相比,它更小巧但描述能力卻不差,由於它的小巧所以網路傳輸資料將減少更多流量從而加快速度,那麼,JSON到底是什麼?JSON就是一串字串 只不過元素會使用特定的符號標註。{} 雙括弧表示對象[] 中括弧表示數組"" 雙引號內是屬性或值: 冒號表示後者是前者的值(這個值可以是字串、數字、也可以是另一個數組或對象)所以 {"name": "Michael"} 可以理解為是一個包含name為Michael的對象而[{"name": "Michael"},{"name": "Jerry"}]就表示包含兩個對象的數組當然了,你也可以使用{"name":["Michael","Jerry"]}來簡化上面一部,這是一個擁有一個name數組的對象 詳細介紹請參見W3SCHOOL: http://www.w3school.com.cn/json/
JSON規範：http://www.ecma-international.org/ecma-262/5.1/
1.1 studentsvar students = [{"cName": "class 1", "ID": "1001", "name": "李X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1002", "name": "張X威", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1003", "name": "於X洋", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1004", "name": "張X揚", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1005", "name": "周X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1006", "name": "王X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1007", "name": "李X朋", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1008", "name": "鄔X春", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 5", "ID": "1009", "name": "李X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 5", "ID": "1010", "name": "孫X麗", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]}];
所謂的動態就是使用刪表和寫表的操作。
2.1 刪除表格刪除除了表頭之外的資料。
CourseInf.deleteTable = function (table) {var mBody = table.getElementsByTagName('tbody'); var len = table.rows.length;for (var i = 1; i < len; i++) {table.removeChild(mBody[1]);}};
CourseInf.writeTable = function (obj, table) {var array = [];var className = obj.value;var iAcc = 0;var rowNum = 0;var str = "";for (var i = 0; i < CourseInf.gradeArrays.length; i++) {for (var key in CourseInf.gradeArrays[i]) {if (CourseInf.gradeArrays[i][key] == className){CourseInf.flag = true;rowNum++;}else {if (CourseInf.flag) {array[key] = CourseInf.gradeArrays[i][key];}}}CourseInf.flag = false;if (rowNum != 0) {for (var j in array) {str = array[j];CourseInf.classArrays[iAcc] = str;iAcc++;}CourseInf.insertTable(4, 1, CourseInf.classArrays, table);}rowNum = 0;}CourseInf.iCount = 0;}; 如果數組中某個鍵值（cName）等於className則執行：標誌為真；並且行數+1操作。
否則，判斷標誌是否為真？為真讀取資料。
if (CourseInf.gradeArrays[i][key] == className){CourseInf.flag = true;rowNum++;}else {if (CourseInf.flag) {array[key] = CourseInf.gradeArrays[i][key];}}
CourseInf.insertTable = function (colNum, rowNum, array, table) {var mBody = document.createElement("tbody");for (var i = 0; i < rowNum; i++) {var mTr = document.createElement("tr");var j = 0;for (j = 0; j < colNum; j++) {var mCell = document.createElement("td");var mText = document.createTextNode(array[j + CourseInf.iCount]);mCell.appendChild(mText);mTr.appendChild(mCell);}CourseInf.iCount += j;mBody.appendChild(mTr);}table.appendChild(mBody);};
我們在讀取班級列表的時候，希望一個班級只能出現一次。
所以，我們要處理多個“class 1”和“class 5”的問題。
for (var i = 0; i < array.length; i++) {obj[array[i]] = true;} obj[array[i]] = true;
也許這麼看就容易懂了obj[key] = true;
附：
dynamicTable.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>動態建立表格</title><script type="text/javascript">var students = [{"cName": "class 1", "ID": "1001", "name": "李X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1002", "name": "張X威", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1003", "name": "於X洋", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1004", "name": "張X揚", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1005", "name": "周X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1006", "name": "王X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1007", "name": "李X朋", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 1", "ID": "1008", "name": "鄔X春", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 5", "ID": "1009", "name": "李X", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]},{"cName": "class 5", "ID": "1010", "name": "孫X麗", "course": ["英語", "高數"], "elective": ["政治經濟學", "哲學"]}];</script><script type="text/javascript" src="dynamicTable.js" ></script></head><body onLoad="CourseInf.loadData(students)"><select id="className" onChange="CourseInf.readClasses(this)"></select><br> <table id="tb1" border="1"> <tr> <th>學號</th> <th>姓名</th> <th>必修課</th> <th>選修課</th> </tr></table></body></html>
/* * 課程資訊 * @author xiaobin */var CourseInf = {gradeArrays : [],classArrays :[],iCount :0,flag : false,};CourseInf.deleteTable = function (table) {var mBody = table.getElementsByTagName('tbody'); var len = table.rows.length;for (var i = 1; i < len; i++) {table.removeChild(mBody[1]);}};CourseInf.insertTable = function (colNum, rowNum, array, table) {var mBody = document.createElement("tbody");for (var i = 0; i < rowNum; i++) {var mTr = document.createElement("tr");var j = 0;for (j = 0; j < colNum; j++) {var mCell = document.createElement("td");var mText = document.createTextNode(array[j + CourseInf.iCount]);mCell.appendChild(mText);mTr.appendChild(mCell);}CourseInf.iCount += j;mBody.appendChild(mTr);}table.appendChild(mBody);};CourseInf.writeTable = function (obj, table) {var array = [];var className = obj.value;var iAcc = 0;var rowNum = 0;var str = "";for (var i = 0; i < CourseInf.gradeArrays.length; i++) {for (var key in CourseInf.gradeArrays[i]) {if (CourseInf.gradeArrays[i][key] == className){CourseInf.flag = true;rowNum++;}else {if (CourseInf.flag) {array[key] = CourseInf.gradeArrays[i][key];}}}CourseInf.flag = false;if (rowNum != 0) {for (var j in array) {str = array[j];CourseInf.classArrays[iAcc] = str;iAcc++;}CourseInf.insertTable(4, 1, CourseInf.classArrays, table);}rowNum = 0;}CourseInf.iCount = 0;};CourseInf.readClasses = function (obj) {var table = document.getElementById("tb1");CourseInf.deleteTable(table);CourseInf.writeTable(obj, table);};CourseInf.loadData = function (array) {var data = [];var vals = [];CourseInf.gradeArrays = array;var obj = document.getElementById("className");// json 中索引值為"cName"的value值放到數組中for (var i = 0; i < array.length; i++) {for (var j in array[i]) {if (j == "cName")data.push(array[i][j]);};}// 重複資料刪除項vals = _uniq(data);// Traverse Arrayfor (var i = 0; i < vals.length; i++) {obj.options.add(new Option(vals[i], vals[i]));};};_toObj = function (array) {var obj = new Array();for (var i = 0; i < array.length; i++) {obj[array[i]] = true;}return obj;};_keys = function (obj) {var array = new Array();for (var i in obj) {if (obj.hasOwnProperty(i)) {array.push(i);};}return array;};_uniq = function (array) {return _keys(_toObj(array));};
動態產生表格 - javascript
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
