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. 开源搜索 Iveely Search Engine 0.6.0 发布 -- 黎明前的娇嫩

    快两年了,Iveely Search Engine已经走过了5个版本的岁月,虽出生“贫寒”,没有任何开源基金会的支持,没有优秀的“干爹.干妈”,它凭着它的爱好者的支持,0.6.0终于破壳而出,7年前, ...

  2. ModelProxy 前端接口配置建模框架

    ModelProxy    轻量级的接口配置建模框架(1) 先看一下这个博客说明为什么需要用ModelProxy的前端轻量级的框架吧:  http://developer.51cto.com/art/ ...

  3. AngularJS开发指南13：AngularJS的过滤器详解

    AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...

  4. chromiun 学习《一》

    众所周知,Chrome是建立在开源的Chromium项目上的. 而且不得不说,学习并分析开源项目的代码对一个程序员的提高确实蛮大的.这篇博文我会记录一下学习过程中我遇到的一些问题,并分享学习中我所参考 ...

  5. Linq 分页不可缺少的两个方法

    //LINQ分页的方法 //1.获取总页数 public int GetPageCount(int pageSize)//pageSize是每页的行数 { //先查出总共有多少行 int rowCou ...

  6. hdu1873优先队列

    #include<stdio.h> #include<queue> using namespace std; struct node { int id; int val; fr ...

  7. org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER

    org.eclipse.m2e.MAVEN2_CLASSPATH_CONTAINER Eclipse中出现无法找到Maven包 症状:出现org.maven.ide.eclipse.MAVEN2_CL ...

  8. 【CodeForces 599A】D - 特别水的题4- Patrick and Shopping

    Description  meter long road between his house and the first shop and a d2 meter long road between h ...

  9. python:open文件操作

    file: jim|123|1 tom|321|3 kamil|432|1 # __author__ = liukun # coding:utf-8 obj = open('file.txt','r' ...

  10. mysql中的having

    from子句后面可以用where选择行,group by子句后面可以用having子句选择行, having中条件的定义和where中很相似,但是having中可以直接用聚合函数,但是where中不能 ...