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 Code2. 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 CodeTap the JavaScript code