當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
敲点JavaScript代码
生活随笔
收集整理的這篇文章主要介紹了
敲点JavaScript代码
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
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">/** 根據(jù)指定表格每行第n的單元格的值，對第一個<tbody>中的行排序，* 如果存在comparator函數(shù)則使用它，否則按字母表順序比較。*/function sortrows(table, n, comparator){var tbodys = table.tBodies[0];var rows = tbodys.getElementsByTagName("tr"); //tbody中的所有行rows = Array.prototype.slice.call(rows, 0); //真實數(shù)組中的快照 rows.sort(function(row1, row2){var ceil1 = row1.getElementsByTagName("td")[n]; //獲得第n個單元格var ceil2 = row2.getElementsByTagName("td")[n]; var val1 = ceil1.textNode || ceil1.innerText; //獲得文本內(nèi)容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中按它們的順序進(jìn)行添加for(var i=0; i<rows.length; i++)tbodys.appendChild(rows[i]);}/** 查找表格的<th>元素，讓它們可點擊，以便點擊列標(biāo)題，按該列對行排序*/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元素，如果不存在，則在文檔中創(chuàng)建一個var toc = document.getElementById("TOC");if(!toc){toc = document.createElement("div");toc.id = "TOC";document.body.insertBefore(toc,document.body.firstChild);}//查找所有的標(biāo)題元素var headings;if(document.querySelectAll){document.querySelectAll("h1,h2,h3,h4,h5,h6");} else {headings = findHeadings(document.body, []);}//遞歸遍歷document.body，查找標(biāo)題元素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;}//初始化一個數(shù)組來保持跟蹤章節(jié)號var sectionNumbers = [0,0,0,0,0,0];//循環(huán)已找到的標(biāo)題元素for(var h=0; h<headings.length; h++){var heading = headings[h];//跳過在TOC容器中的標(biāo)題元素if(heading.parentNode == toc) continue;//判斷標(biāo)題級別var level = parseInt(heading.tagName.charAt(1));if(isNaN(level) || level<1 || level>6) continue;//對于該標(biāo)題級別增加sectionNumbers對應(yīng)的數(shù)字，重置所以標(biāo)題比它級別低的數(shù)字為零sectionNumbers[level-1]++;for(var i=level; i<6; i++)sectionNumbers[i] = 0;//將所有標(biāo)題級別的章節(jié)組合產(chǎn)生一個章節(jié)號，如2.3.1var sectionNumber = sectionNumbers.slice(0,level).join(".");//為標(biāo)題級別增加章節(jié)號，把數(shù)組放在<span>中，使其可以用樣式修飾var span = document.createElement("span");span.className = "TOCSectNum";span.innerHTML = sectionNumber;heading.insertBefore(span, heading.firstChild);//用命名的錨點將標(biāo)題包起來，以便為它增加鏈接var anchor = document.createElement("a");anchor.name = "TOC"+sectionNumber;heading.parentNode.insertBefore(anchor,heading);anchor.appendChild(heading);//現(xiàn)在為該節(jié)點創(chuàng)建一個鏈接var link = document.createElement("a");link.href = "#TOC" + sectionNumber; //鏈接的目標(biāo)地址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?
轉(zhuǎn)載于:https://www.cnblogs.com/borage/p/4449767.html
總結(jié)
以上是生活随笔為你收集整理的敲点JavaScript代码的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Talend open studio数据
- 下一篇： nodejs中的全局函数setTimeo