敲点JavaScript代码

浏览数：29 / 时间：2015年06月08日

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>

View Code

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>