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>

敲点JavaScript代码的更多相关文章

  1. 利用chrome调试JavaScript代码

    看见网上很多人问怎么用chrome调试JavaScript代码,我也对这个问题抱着疑问,但是没有找到一篇能用的中文文章(可能我的google有问题),也不知道怎么点出一篇E文的,感觉作者写得不错,所以 ...

  2. 如何管理你的 Javascript 代码

    今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码.首先,咱们先来说说一般都有哪些管理方式?我相信  seajs . requirejs  对于前端开发者而言都不陌 ...

  3. 林大妈的JavaScript基础知识（二）：编写JavaScript代码前的一些简单工作

    在介绍JavaScript语法前,我们需要知道,学习语法必须要多利用手敲代码来巩固记忆.因此,由于JavaScript的特性,它不能像C++和Java一样独立地编译及运行,我们需要在调试运行JavaS ...

  4. javascript代码 调试方法

    你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...

  5. 7个高性能JavaScript代码高亮插件

    本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染 ...

  6. JavaScript代码段整理笔记系列（二）

    上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...

  7. JavaScript代码段整理笔记系列（一）

    30段JavaScript代码——上篇 1.如何区分IE及非IE浏览器: if(!+[1,]){ //IE 11 不支持 alert("这是 IE 浏览器"): }else{ al ...

  8. 如何让你的JavaScript代码更加语义化

    语义化这个词在 HTML 中用的比较多,即根据内容的结构化选择合适的标签.其作用不容小觑: 赋予标签含义,让代码结构更加清晰,虽然我们可以在标签上添加 class 来标识,但这种通过属性来表示本体的形 ...

  9. 推荐15个最好用的 JavaScript 代码压缩工具

    JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...

随机推荐

  1. 总体最小二乘（TLS）

    对于见得多了的东西,我往往就习以为常了,慢慢的就默认了它的存在,而不去思考内在的一些道理.总体最小二乘是一种推广最小二乘方法,本文的主要内容参考张贤达的<矩阵分析与应用>. 1. 最小二乘 ...

  2. Unity3D 2D游戏中寻径算法的一些解决思路

    需求 unity3d的3d开发环境中,原生自带了Navigation的组件,可以很便捷快速的实现寻路功能.但是在原生的2d中并没有相同的功能. 现在国内很多手机游戏都有自动寻路的功能,或者游戏中存在一 ...

  3. 端口扫描之王——nmap入门精讲（二）

    接着讲上节的内容,上节中提到了一个时间优化的问题是使用参数-n,通过不解析地址来进行优化时间的,但是优化时间的方法还有很多,比如说我们可以通过时间优化(0-5),指定单位时间内的探针数,设置组的大小 ...

  4. [BZOJ2038]小Z的袜子（莫队算法）

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2038 分析:莫队算法 莫队算法是一种思想…… 处理问题:不带修改的区间询问 使用要求:[l-1 ...

  5. DOM（五）事件对象

    浏览器中的事件都是以对象的形式存在的,同样ie浏览器与标准dom浏览器之间存在获取事件对象上也存在差别.在ie浏览器中事件对象是windows对象的一个属性event,访问通常采用如下方法. oP.o ...

  6. Redis——分布式简单使用

    Redis简介:Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API. Redis安装:参考博客http://www ...

  7. python 生成器

    摘自:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138681965108 ...

  8. Linux进程管理工具——supervisor

    介绍 Supervisord是用Python实现的一款非常实用的进程管理工具 安装 这里用源码 supervisor-.tar.gz .tar.gz cd supervisor- sudo pytho ...

  9. js库中$冲突的解决方法

    http://www.w3school.com.cn/jquery/core_noconflict.asp

  10. java.lang.NoClassDefFoundError: javax/transaction/UserTransaction

    在运行定时任务的时候报错: Java.lang.NoClassDefFoundError: javax/transaction/UserTransaction 原因:缺少jta的jar包 解决方法:下 ...