敲点JavaScript代码

2023-07-21 11:07:40

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>

码农公寓

1. DOM DEMO-表格的行排序

相关文章