Dynamically generated tables-JavaScript

One, the JSON data source

JSON Explanation:

JSON is a data structure to replace XML, compared with XML, it is smaller but the description is not bad, because it is small so that the network transmission of data will reduce more traffic to speed up, so what is JSON? JSON is a string of strings except that the elements are labeled with a particular symbol. {} Double brackets represent an object [] in parentheses that denote an array "" in double quotation marks as a property or a value: a colon indicates that the latter is a value (the value can be a string, a number, or another array or object), so {"name": "Michael"} Can be understood as an object containing the name Michael and [{"Name": "Michael"},{"name": "Jerry"}] means an array of two objects of course, you can also use {"Name": ["Michael", "Jerry "]} to simplify the above one, which is an object with an array of name

For more information, see w3school:http://www.w3school.com.cn/json/

JSON specification: HTTP://WWW.ECMA-INTERNATIONAL.ORG/ECMA-262/5.1/

1.1 Students

var students = [{"CName": "Class 1", "ID": "1001", "Name": "Li X", "Course": ["English", "high number"], "elective": ["Political Economy", "philosophy"]},{"CN Ame ":" Class 1 "," ID ":" 1002 "," name ":" Zhang X wei "," Course ": [" English "," high number "]," elective ": [" Political Economy "," philosophy "]},{" CName ":" Class 1 "," I  D ":" 1003 "," name ":" In X Yang "," Course ": [" English "," high number "]," elective ": [" Political Economy "," philosophy "]},{" CName ":" Class 1 "," ID ":" 1004 "," name ": "Zhang X Yang", "Course": ["English", "high number"], "elective": ["Political Economy", "philosophy"]},{"CName": "Class 1", "ID": "1005", "Name": "Week X", "Course": [" English "," high number "]," elective ": [" Political Economy "," philosophy "]},{" CName ":" Class 1 "," ID ":" 1006 "," name ":" Wang X "," Course ": [" English "," high number "]," electiv E ": [" Political Economy "," philosophy "]},{" CName ":" Class 1 "," ID ":" 1007 "," name ":" Li x Peng "," Course ": [" English "," high number "]," elective ": [" Political Economy "," philosophy "] },{"CNAME": "Class 1", "ID": "1008", "name": "Wu X Spring", "Course": ["English", "high number"], "elective": ["Political Economy", "philosophy"]},{"CName": "Class 5 "," ID ":" 1009 "," name ":" Li X "," Course ": [" English "," high number "]," elective ": [" Political Economy "," philosophy "]},{" CName ":" Class 5 "," ID ":" 1010 "," N Ame ":" Sun x li "," Course ": ["English", "high number", "Elective": ["Political Economy", "Philosophy"]}]; 

Second, function design

The so-called dynamic is the use of the delete table and write the table operation.

2.1 Delete a table

Deletes data other than the header of the table.

courseinf.deletetable = function (table) {var mbody = table.getelementsbytagname (' tbody '); var len = Table.rows.length;fo R (var i = 1; i < Len; i++) {table.removechild (mbody[1]);}};

2.2 Writing a form

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;ro wnum++;} 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;};

If a key value (CName) in the array equals classname, execute: The flag is true, and the number of rows is +1.

Otherwise, will the flag be judged true? Read data for True.

if (courseinf.gradearrays[i][key] = = className) {courseinf.flag = true;rownum++;} else {if (Courseinf.flag) {Array[key] = Courseinf.gradearrays[i][key];}}

The number of rows is not equal to 0 o'clock, insert tabular data

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);};

2.3 Deleting duplicates

When we read the class list, we expect a class to appear only once.

So, we're dealing with multiple "Class 1" and "Class 5" issues.

for (var i = 0; i < Array.Length; i++) {Obj[array[i]] = true;}

Obj[array[i]] = true;

Maybe it's easy to see this. Obj[key] = true;

Report:

Dynamictable.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Dynamictable.js
*/* Course information * @author xiaobin */var courseinf = {gradearrays: [],classarrays: [],icount:0,flag:false,}; courseinf.deletetable = function (table) {var mbody = table.getelementsbytagname (' tbody '); var len = Table.rows.length;fo R (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"),///The value value of "CName" in JSON is placed in the array for (var i = 0; i < Array.Length; i++) {for (Var j in Array[i]) {if (j = = "CName") Data.push (Array[i][j]);} Delete Duplicates 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));};


Dynamically generated tables-JavaScript