1. DOM DEMO-表格的行排序
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DEMO~DEMO</title>
<style type="text/css">
</style>
</head>
<body>
<table id="tab" border=1>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr><td>111</td><td>1</td></tr>
<tr><td>888</td><td>7</td></tr>
<tr><td>333</td><td>3</td></tr>
<tr><td>555</td><td>6</td></tr>
</tbody>
</table>
<script type="text/javascript">
/*
* 根据指定表格每行第n的单元格的值，对第一个<tbody>中的行排序，
* 如果存在comparator函数则使用它，否则按字母表顺序比较。
*/
function sortrows(table, n, comparator){
var tbodys = table.tBodies[0];
var rows = tbodys.getElementsByTagName("tr"); //tbody中的所有行
rows = Array.prototype.slice.call(rows, 0); //真实数组中的快照
rows.sort(function(row1, row2){
var ceil1 = row1.getElementsByTagName("td")[n]; //获得第n个单元格
var ceil2 = row2.getElementsByTagName("td")[n];
var val1 = ceil1.textNode || ceil1.innerText; //获得文本内容
var val2 = ceil2.textNode || ceil2.innerText; //比较
if(comparator)
return comparator(val1, val2);
if(val1 < val2) return -1;
else if(val1 > val2) return 1;
else return 0;
});
//在tbody中按它们的顺序进行添加
for(var i=0; i<rows.length; i++)
tbodys.appendChild(rows[i]);
}
/*
* 查找表格的<th>元素，让它们可点击，以便点击列标题，按该列对行排序
*/
function makeSortable(table){
var headers = table.getElementsByTagName("th");
for(var i=0; i<headers.length; i++){
(function(n){
headers[i].onclick = function(){
sortrows(table, n);
};
}(i));
}
}
var tab = document.getElementById("tab");
makeSortable(tab);
</script>
</body>
</html>
2. 生成子目录
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DEMO~DEMO</title> <style type="text/css"> #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:.5in;} .TOCSectNum:after {content: ":";} /*表示每个段编号之后都有一个冒号和空格符。*/ .TOCSectNum {display:none;} </style> </head> <body> <div id="TOC"> </div> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> <script type="text/javascript"> (function(){ //查找TOC元素，如果不存在，则在文档中创建一个 var toc = document.getElementById("TOC"); if(!toc){ toc = document.createElement("div"); toc.id = "TOC"; document.body.insertBefore(toc,document.body.firstChild); } //查找所有的标题元素 var headings; if(document.querySelectAll){ document.querySelectAll("h1,h2,h3,h4,h5,h6"); } else { headings = findHeadings(document.body, []); } //递归遍历document.body，查找标题元素 function findHeadings(root, sects){ for(var c=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); } } return sects; } //初始化一个数组来保持跟踪章节号 var sectionNumbers = [0,0,0,0,0,0]; //循环已找到的标题元素 for(var h=0; h<headings.length; h++){ var heading = headings[h]; //跳过在TOC容器中的标题元素 if(heading.parentNode == toc) continue; //判断标题级别 var level = parseInt(heading.tagName.charAt(1)); if(isNaN(level) || level<1 || level>6) continue; //对于该标题级别增加sectionNumbers对应的数字，重置所以标题比它级别低的数字为零 sectionNumbers[level-1]++; for(var i=level; i<6; i++) sectionNumbers[i] = 0; //将所有标题级别的章节组合产生一个章节号，如2.3.1 var sectionNumber = sectionNumbers.slice(0,level).join("."); //为标题级别增加章节号，把数组放在<span>中，使其可以用样式修饰 var span = document.createElement("span"); span.className = "TOCSectNum"; span.innerHTML = sectionNumber; heading.insertBefore(span, heading.firstChild); //用命名的锚点将标题包起来，以便为它增加链接 var anchor = document.createElement("a"); anchor.name = "TOC"+sectionNumber; heading.parentNode.insertBefore(anchor,heading); anchor.appendChild(heading); //现在为该节点创建一个链接 var link = document.createElement("a"); link.href = "#TOC" + sectionNumber; //链接的目标地址 link.innerHTML = heading.innerHTML; //将链接地址放在一个div中，div用基于级别名字的样式修饰 var entry = document.createElement("div"); entry.className = "TOCEntry TOCLevel"+level; entry.appendChild(link); toc.appendChild(entry); } }()); </script> </body> </html>