欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 >

敲点JavaScript代码

发布时间：2025/3/21 46 豆豆
生活随笔 收集整理的这篇文章主要介绍了 敲点JavaScript代码 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

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> View Code

 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.1var 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> View Code

 

转载于:https://www.cnblogs.com/borage/p/4449767.html

总结

以上是生活随笔为你收集整理的敲点JavaScript代码的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。