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. C# GC 垃圾回收机制

    今天来谈谈C# 的GC ,也就是垃圾回收机制,非常的受教,总结如下 首先:谈谈托管,什么叫托管,我的理解就是托付C# 运行环境帮我们去管理,在这个运行环境中可以帮助我们开辟内存和释放内存,开辟内存一般 ...

  2. node 学习笔记 - fs 文件操作

    本文同步自我的个人博客:http://www.52cik.com/2015/12/03/learn-node-fs.html 最近看到群里不少大神都开始玩 node 了,我感觉跟他们步伐越来越大了, ...

  3. web性能优化之：no-cache与must-revalidate深入探究

    引言 稍微了解HTTP协议的前端同学,相比对Cache-Control不会感到陌生,性能优化时经常都会跟它打交道. 常见的值有有private.public.no-store.no-cache.mus ...

  4. 浅析Java异常

    1.什么是异常 结构不佳的代码不能运行,这是Java的基本理念. 发现错误的理想时机是在编译期.然而,编译器并不能发现所有的错误,余下的问题就需要在程序运行时解决.这就需要错误能通过某种方式,把适当的 ...

  5. Java并发编程-ConcurrentHashMap

    特点: 将桶分段,并在某个段上加锁,提高并发能力 源码分析: V put(K key, int hash, V value, boolean onlyIfAbsent) { lock(); try { ...

  6. SqlDependency数据库同步+signalr 推送消息

    sqlDependency提供了这样一种能力:当被监测的数据库中的数据发生变化时,SqlDependency会自动触发OnChange事件来通知应用程序,从而达到让系统自动更新数据(或缓存)的目的. ...

  7. WebView与JavaScript的交互

    目录: 一.整体思路 二.简单例子实现过程        1.打开项目的asset目录,创建新的文件test.html        2.补充html代码:添加供本地调用的js方法.调用本地方法的js ...

  8. java.lang.NoClassDefFoundError: com/sun/mail/util/BEncoderStream

    :java.lang.NoClassDefFoundError: com/sun/mail/util/BEncoderStream 这个问题是Mail.jar包没有引入到java路径中,或者是版本的问 ...

  9. OC基础--构造方法

    OC语言中类的构造方法学了两种: 一.方法一:[类名 new] 例:[Person new] 缺点:可扩展性不强,假如在Person类中有_age 成员变量,在初始化时想让_age 中的值为20,ne ...

  10. Learn sed using these command on Linux（流线式编辑器——sed）

    是对文件中的每一行进行处理,不会对源文件进行修改 sed --version sed '11d' sed_file sed -n '/[Bb]erry/p' sed_file (由于设置了n,所以只打 ...