Create a table with a constructor function

1. Building basic Logic Add attributes

<script>functionctag(tagName) { return document.createelement (tagName);} function Table() { /* actually when calling this constructor, the DOM method * should be used to create the corresponding Table label with the tbody label */This . DOM = Ctag ( ' table '); This . Dom.appendchild (Ctag ( ' tbody '));} var t = new Table (); /* In the development of a principle, is to try not to modify the original object * /Document.body.appendChild (t.dom);  </script>                

2. Add function, set width height

<script>functionCtag(TagName) {ReturnDocument.createelement (TagName); }functionTable(width, border) {This. DOM = Ctag (' table ');This. Dom.appendchild (Ctag (' tbody '));This. Dom.width = width;This . Dom.border = border; this.width = function(w) {this . Dom.width = W; } This.border = function(border) {this . Dom.border = border; }} var t = new Table (  5); //T.width (400); //T.border (1); Document.body.appendChild (t.dom); </script>                 

3. Providing parameters using JSON objects

Because of the many attributes, there is no direct way to control what the user enters and the HTML tag supports user-defined attributes. There is no way to control the arguments to the constructor. Using JSON objects to provide parameters

<script>functionCtag(TagName) {ReturnDocument.createelement (TagName); }functionTable(option) {var table = Ctag ( ' table '); /* uses the for in loop to get all the attribute names in option */for (var k in option" {//table[K] = option[K]; Adding attributes to an object Table.setattribute (K, option[K]); //Add property to tag} this. DOM = table; Table.appendchild (Ctag (var t = new Table ({width: 400, border: 1, Jepson:  ' jepsonname '}); document.body.appendchild (t.dom); </SCRIPT>      

4. Create Tr, Td object

<script>functionCtag(TagName) {ReturnDocument.createelement (TagName); }functionTable(option) {var table = Ctag (' table ');/* Use the For In loop to get all the attribute names in option */for (var kIn option) {table[K] = option[K]; Adding attributes to an object Table.setattribute (K, option[K]);Add a property to a tag}This. DOM = table; Table.appendchild (Ctag (' tbody '));This.add =function(TR) {Add the TR label to the table label Table.lastChild.appendChild (TR); } }/* Define TR */functionTr() {This. DOM = Ctag (' tr ');This.add =function(TD) {This. Dom.appendchild (TD); } }/* Define TD */functionTd(Value, option) {var td = Ctag (' TD ');This. DOM = TD;for (var kin option) {Td.setattribute (k, option[K]);} td.innerhtml = value; } /* test data */var t = new Table ({width : 400, border: 1, Jepson:  JepsonName ‘}); /* Test TR */var tr = new tr (); T.add ( Tr. DOM); /* Test TD */var td = new TD (123, {border:1, Testtd:  ' testTd '}); Tr.add (TD. DOM); document.body.appendchild (t.dom); </SCRIPT>      

5. Complete the creation of a table

<script>functionCtag(TagName) {ReturnDocument.createelement (TagName); }/* Table Object */functionTable(option) {var table = Ctag (' table ');/* Use the For In loop to get all the attribute names in option */for (var kIn option) {table[K] = option[K]; Adding attributes to an object Table.setattribute (K, option[K]);Add a property to a tag}This. DOM = table; Table.appendchild (Ctag (' tbody '));This.add =function(TR) {table.lastChild.appendChild (tr);} }/* Define TR */functionTr() {This. DOM = Ctag (' tr ');This.add =function(TD) {This. Dom.appendchild (TD); } }/* Define TD */functionTd(Value, option) {var td = Ctag (' TD ');This. DOM = TD; td.innerhtml = value;/* Properties */for (var kIn option) {Td.setattribute (k, option[K]);}}/* Tabular Data */var arr = [{name:' Jim1 ', Age:Gender:' Man '}, {name:' Jim2 ', Age:Gender:' Man '}, {name:' Jim3 ', Age:Gender:' Man '}, {name:' Jim4 ', Age:Gender:' Male '}];/* CREATE TABLE */var t =New Table ({width:border:1, Jepson: Jepsonname '}); /* how many rows of data are created */for (var i = " Span class= "Hljs-number" >1; i < arr.length; i++) {/* Create line, add row */var tr = new tr () ; T.add (tr. DOM); /* traverse object, create object, new TD */for (var K Span class= "Hljs-keyword" >in arr[i]) {/* new TD Add TD */var td = new TD (Arr[I [K]); Tr.add (TD. DOM); }} /* render the table to the page */document.body.appendchild (T.DOM); </SCRIPT>      

Create a table with a constructor