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>
时间： 2024-11-26 12:31:24