Tap the JavaScript code

1. Row ordering of DOM demo-tables

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">/** Sort the first <tbody> row according to the value of the cell in the nth of each row of the specified table, and use it if there is a comparator function, otherwise it is compared in alphabetical order. */    functionsortrows (table, n, comparator) {varTbodys = Table.tbodies[0]; varrows = Tbodys.getelementsbytagname ("tr");//all rows in the Tbodyrows = Array.prototype.slice.call (rows, 0);//snapshots in a real arrayRows.sort (function(Row1, row2) {varCeil1 = Row1.getelementsbytagname ("TD") [n];//Get nth Cell            varCEIL2 = Row2.getelementsbytagname ("TD") [n]; varVal1 = Ceil1.textnode | | Ceil1.innertext;//Get text content                        varVal2 = Ceil2.textnode | | Ceil2.innertext;//Compare            if(Comparator)returnComparator (val1, val2); if(Val1 < Val2)return-1; Else if(Val1 > Val2)return1; Else return0;        }); //add them in tbody in their order         for(vari=0; i<rows.length; i++) Tbodys.appendchild (Rows[i]); }    /** Find the <th> elements of the table so they can be clicked to click on the column headings and sort the rows by that column*/    functionmakesortable (table) {varheaders = table.getelementsbytagname ("th");  for(vari=0; i){            (function(n) {Headers[i].onclick=function() {sortrows (table, n);            };        } (i)); }    }        vartab = document.getElementById ("tab");    makesortable (tab); </script></body>View Code
2. Creating subdirectories
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">#TOC {border:solid black 1px; margin:10px; padding:10px}. tocentry {font-family:sans-serif;} . Tocentry a {text-Decoration:none;} . TOCLevel1 {font-size:16px; font-Weight:bold;} . TOCLevel2 {font-size:12px; margin-left:.5inch;} . Tocsectnum:after {content:":";}/*indicates that there is a colon and a space character after each segment number. */    . tocsectnum {display:none;}</style>        (function(){            //finds the TOC element, if it does not exist, creates a            varTOC = document.getElementById ("TOC"); if(!TOC) {TOC= Document.createelement ("div"); Toc.id= "TOC";            Document.body.insertBefore (Toc,document.body.firstchild); }            //Find all the heading elements            varheadings; if(Document.queryselectall) {Document.queryselectall ("H1,h2,h3,h4,h5,h6"); } Else{headings=findheadings (Document.body, []); }                        //recursively traverse document.body to find header elements            functionfindheadings (root, sects) { for(varC=root.firstchild; c!=NULL; C=c.nextsibling) {                    if(C.nodetype!== 1)Continue; if(C.tagname.length = = 2 && c.tagname.charat (0) = = "H") {Sects.push (c); } Else{findheadings (c,sects); }                }                returnsects; }                        //initialize an array to keep track of chapter numbers            varSectionnumbers = [0,0,0,0,0,0]; //loop the found caption element             for(varh=0; h){                varHeading =Headings[h]; //Skip heading element in TOC container                if(Heading.parentnode = = TOC)Continue; //judging the heading level                varLevel = parseint (Heading.tagName.charAt (1)); if(IsNaN (level) | | level<1 | | level>6)Continue; //for this heading level, increase the number of sectionnumbers, reset so that the title is lower than its level of the number zerosectionnumbers[level-1]++;  for(varI=level; i<6; i++) Sectionnumbers[i]= 0; //Create a chapter number for all heading levels, such as 2.3.1                varSectionnumber = Sectionnumbers.slice (0,level). Join ("."); //add a chapter number to the heading level and put the array in <span> so that it can be decorated with styles                varspan = document.createelement ("span"); Span.classname= "Tocsectnum"; Span.innerhtml=Sectionnumber;                                Heading.insertbefore (span, heading.firstchild); //wrap the title with a named anchor point to add a link to it                varAnchor = document.createelement ("a"); Anchor.name= "TOC" +Sectionnumber;                Heading.parentNode.insertBefore (anchor,heading);                                Anchor.appendchild (heading); //now create a link for the node                varlink = document.createelement ("a"); Link.href= "#TOC" + sectionnumber;//Destination Address of the linklink.innerhtml =heading.innerhtml; //Place the link address in a div, with the div decorated with a style based on the level name                varEntry = document.createelement ("div"); Entry.classname= "Tocentry Toclevel" +Level ;                                Entry.appendchild (link);            Toc.appendchild (entry);            }        }()); </script></body>View Code
Tap the JavaScript code