如果你也想这么做，那么你还需要我的getElementByTagNames()函数。复制代码 代码如下:function createTOC() { var y = document.createElement('div'); y.id = 'innertoc'; var a = y.appendChild(document.createElement('span')); a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = 'show page contents'; var z = y.appendChild(document.createElement('div')); z.onclick = showhideTOC; var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5'); if (toBeTOCced.length < 2) return false; for (var i=0;i<toBeTOCced.length;i++) { var tmp = document.createElement('a'); tmp.innerHTML = toBeTOCced[i].innerHTML; tmp.className = 'page'; z.appendChild(tmp); if (toBeTOCced[i].nodeName == 'H4') tmp.className += ' indent'; if (toBeTOCced[i].nodeName == 'H5') tmp.className += ' extraindent'; var headerId = toBeTOCced[i].id || 'link' + i; tmp.href = '#' + headerId; toBeTOCced[i].id = headerId; if (toBeTOCced[i].nodeName == 'H2') { tmp.innerHTML = 'Top'; tmp.href = '#top'; toBeTOCced[i].id = 'top'; } } return y; } var TOCstate = 'none'; function showhideTOC() { TOCstate = (TOCstate == 'none') ? 'block' : 'none'; var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents'; document.getElementById('contentheader').innerHTML = newText; document.getElementById('innertoc').lastChild.style.display = TOCstate; }解释 这段代码运行如下： 准备阶段 首先我创建一个<div id="innertoc">来放置表格内容 复制代码 代码如下: function createTOC() { var y = document.createElement('div'); y.id = 'innertoc'; 然后在他的上面添加一个<span>标签。点击这个元素就会运行showhideTOC()函数，我会在下面解释。 复制代码 代码如下: var a = y.appendChild(document.createElement('span')); a.onclick = showhideTOC; a.id = 'contentheader'; a.innerHTML = 'show page contents'; 然后我再创建一个DIV用了放置真正的链接。在这个div上单击（真正的含义是：在这个div里的任何一个链接上单击）一样会触发showhideTOC()函数。 复制代码 代码如下: var z = y.appendChild(document.createElement('div')); z.onclick = showhideTOC; 得到标题 然后新建一个toBeTOCced数组，再用我的getElementByTagNames()函数来得到整个页面的左右标题。 复制代码 代码如下: var toBeTOCced = getElementsByTagNames('h2,h3,h4,h5'); 如果数组里只有一个元素（比如这个页面只有一个h2标题）就停止。我不想让ToC只有一个元素。 创建ToC 现在开始创建ToC。首先遍历toBeTOCced数组。对于每个元素我都创建一个和他们的标题相同的链接。注意innerHTML的使用：网站里有些标题包含<code>这样的HTML标签，我也想让这些在ToC里面显示。我把这些新的链接添加在ToC的里面的<div>上。 复制代码 代码如下: for (var i=0;i<toBeTOCced.length;i++) { var tmp = document.createElement('a'); tmp.innerHTML = toBeTOCced[i].innerHTML; tmp.className = 'page'; z.appendChild(tmp); 如果标题是h4或者h5我就添加一个额外的类。 复制代码 代码如下: if (toBeTOCced[i].nodeName == 'H4') tmp.className += ' indent'; if (toBeTOCced[i].nodeName == 'H5') tmp.className += ' extraindent'; 现在我们需要把a元素链接到他真正的标题上。这需要一个唯一的ID。然而，这些标题可能已经包含一个ID了。我不想破坏原有的内部链接，所以我更愿意使用标题本来的ID。只有当标题没有ID的时候我才创建一个新的ID。 复制代码 代码如下: var headerId = toBeTOCced[i].id || 'link' + i; 我们刚刚创建的链接的href属性就应该是#+headerId，标题本身也就有了一个ID。 复制代码 代码如下: tmp.href = '#' + headerId; toBeTOCced[i].id = headerId; 一个特殊情况：如果标题是H2，那就是页面的顶部，也会得到一个ID。 复制代码 代码如下: if (toBeTOCced[i].nodeName == 'H2') { tmp.innerHTML = 'Top'; tmp.href = '#top'; toBeTOCced[i].id = 'top'; } } 现在表格就生产了，我们返回给调用它的地方。 复制代码 代码如下:return y;} 显示和隐藏ToC 最后这个函数用了显示和隐藏ToC。非常的简单，先检测ToC的状态，然后根据信息生产一个新的文本和display值。 复制代码 代码如下: var TOCstate = 'none'; function showhideTOC() { TOCstate = (TOCstate == 'none') ? 'block' : 'none'; var newText = (TOCstate == 'none') ? 'show page contents' : 'hide page contents'; document.getElementById('contentheader').innerHTML = newText; document.getElementById('innertoc').lastChild.style.display = TOCstate; } 这个函数在用户点击<span>的时候调用，那样他就可以切换ToC的显示。另外当用户在链接上点击的时候也会马上隐藏ToC的。 翻译地址：http://www.quirksmode.org/dom/toc.html 转载请保留以下信息 作者：北玉(tw:@rehawk)

　　推荐阅读

　　javascript入门基础之私有变量

先看javascript的普通函数用法 复制代码 代码如下: function sum(a,b){ var c = 10; function add(){ c++; } add(); return a + b + c; } var d = sum(4,5); alert(d) // 20 可以看出，外部要和函数sum进行交互，>>>详细阅读

本文标题：JavaScript DOM 学习第三章 内容表格

地址：http://www.17bianji.com/kaifa2/JS/27044.html

 1/2    1