首頁 > 開發者 > 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.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>View Code
敲點JavaScript代碼
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
