2013-01-29
The Art & Science of JavaScript
http://www.sitepoint.com/books/jsdesign1/
With the introduction of the simply css and html of the section I(http://www.cnblogs.com/accipiter/archive/2013/01/25/2877238.html).
now we can should make a table first.and in the table we have use some css styles.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html> 4 <head> 5 <title>table</title> 6 <link rel="stylesheet" type="text/css" href="table.css"> 7 </head> 8 <body > 9 <table id="sales" summary="Quarterly Sales (stated in millions of dollars)" vAlign="center"> 10 <caption>Quarterly sales*</caption> 11 <thead> 12 <tr> 13 <th scope="col">companys</th> 14 <th scope="col">Q1</th> 15 <th scope="col">Q2</th> 16 <th scope="col">Q3</th> 17 <th scope="col">Q4</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr> 22 <th>company A</th> 23 <td>$132</td> 24 <td>$146</td> 25 <td>$12</td> 26 <td>$32</td> 27 </tr> 28 <tr> 29 <th>company B</th> 30 <td>$42</td> 31 <td>$76</td> 32 <td>$33</td> 33 <td>$87</td> 34 </tr> 35 <th>company C</th> 36 <td>$132</td> 37 <td>$16</td> 38 <td>$126</td> 39 <td>$34</td> 40 </tr> 41 <tr> 42 <th>company D</th> 43 <td>$15</td> 44 <td>$156.13</td> 45 <td>$19</td> 46 <td>$32,343</td> 47 </tr> 48 </tbody> 49 </table> 50 <p class="footnote">*Stated in millions of dollars</p> 51 </body> 52 </html>
the css is:
1 table 2 { 3 border:solid 1px #fe0; 4 border-collapse:collapse; 5 } 6 table caption 7 { 8 color:#f00; 9 font-size:150%; 10 font-weight:bold; 11 text-transform:uppercase; 12 } 13 .footnote 14 { 15 color:#f00; 16 font-size:75%; 17 } 18 table caption, 19 table th, 20 table td, 21 .footnote 22 { 23 font-family:Arial, Helvetica, sans-serif; 24 padding:.5em; 25 } 26 table th 27 { 28 border:solid 1px; 29 color:#666; 30 background-color:#fc6; 31 } 32 table td 33 { 34 border:solid 1px; 35 } 36 table thead th { 37 background: #fea; 38 color: #630; 39 border-bottom: solid 3px #630; 40 }
with these , we can make a very beautiful table but it's not just we want .
what we want is a sort and more method table.
first ,we may create a sort table.
and the html as next:
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html> 4 <head> 5 <title>table</title> 6 <link rel="stylesheet" type="text/css" href="tablesort.css"> 7 <script type="text/javascript" src="tablesort.js"></script> 8 <script type="text/javascript"> 9 window.onload = function() 10 { 11 var sales=new TableSort("sales"); 12 } 13 </script> 14 </head> 15 <body > 16 <table id="sales" summary="Quarterly Sales (stated in millions of dollars)" vAlign="center"> 17 <caption>Quarterly sales*</caption> 18 <thead> 19 <tr> 20 <th scope="col">companys</th> 21 <th scope="col">Q1</th> 22 <th scope="col">Q2</th> 23 <th scope="col">Q3</th> 24 <th scope="col">Q4</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr> 29 <th>company A</th> 30 <td>$132</td> 31 <td>$146</td> 32 <td>$12</td> 33 <td>$32</td> 34 </tr> 35 <tr> 36 <th>company B</th> 37 <td>$42</td> 38 <td>$76</td> 39 <td>$33</td> 40 <td>$87</td> 41 </tr> 42 <tr> 43 <th>company C</th> 44 <td>$132</td> 45 <td>$16</td> 46 <td>$126</td> 47 <td>$34</td> 48 </tr> 49 <tr> 50 <th>company D</th> 51 <td>$15</td> 52 <td>$156.13</td> 53 <td>$19</td> 54 <td>$32,343</td> 55 </tr> 56 </tbody> 57 </table> 58 <p class="footnote">*Stated in millions of dollars</p> 59 </body> 60 </html>
and the css is like that:
View Code
1 table 2 { 3 border:solid 1px #fe0; 4 border-collapse:collapse; 5 } 6 table caption 7 { 8 color:#f00; 9 font-size:150%; 10 font-weight:bold; 11 text-transform:uppercase; 12 } 13 .footnote 14 { 15 color:#f00; 16 font-size:75%; 17 } 18 table caption, 19 table th, 20 table td, 21 .footnote 22 { 23 font-family:Arial, Helvetica, sans-serif; 24 padding:.5em; 25 } 26 table th 27 { 28 border:solid 1px; 29 color:#666; 30 background-color:#fc6; 31 } 32 table td 33 { 34 border:solid 1px; 35 } 36 table thead th { 37 background: #fea; 38 color: #630; 39 border-bottom: solid 3px #630; 40 } 41 table thead th a 42 { 43 color: #630; 44 display: block; 45 padding: 0 17px; 46 background: #fea url(arrow-up.gif) no-repeat right center; 47 } 48 table thead th.asc a { 49 background: #fea url(arrow-up-sel.gif) no-repeat right center; 50 } 51 table thead th.dsc a { 52 background: #fea url(arrow-dn-sel.gif) no-repeat right center; 53 }
and the js is like that,with some omments i have insert in the text,and some comments add by the auther of the art & science of JavaScript.
1 function TableSort(id) { 2 this.tbl = document.getElementById(id); 3 this.lastSortedTh = null; 4 if (this.tbl && this.tbl.nodeName == "TABLE") { 5 var headings = this.tbl.tHead.rows[0].cells; 6 for (var i=0; headings[i]; i++) { 7 //this written method (not headings.length)is very useful, 8 // it may improve the efficient of the program. 9 if (headings[i].className.match(/asc|dsc/)) { 10 this.lastSortedTh = headings[i]; 11 } 12 } 13 this.makeSortable(); 14 } 15 } 16 17 TableSort.prototype.makeSortable = function () { 18 var headings = this.tbl.tHead.rows[0].cells; 19 for (var i=0; headings[i]; i++) { 20 headings[i].cIdx = i; 21 //this is beacause the bug of safari 2.04(the return of cellindex is always 0),so 22 //we should simulate a index for every cell. 23 var a = document.createElement("a"); 24 a.href = "#"; 25 a.innerHTML = headings[i].innerHTML; 26 a.onclick = function (that) { 27 return function () { 28 that.sortCol(this); 29 return false; 30 } 31 }(this); 32 // we use embedded function to deal with the "this" of its scope . for onclick,"this" 33 // may point to the function's obeject,but in there we should make "this" point to TabbleSort 34 // and its not the click hooks.In there when the brower add to here ,it may be execute it. 35 // return false is prevent the hooks open the href of the link,its very important. 36 headings[i].innerHTML = ""; 37 headings[i].appendChild(a); 38 } 39 } 40 41 TableSort.prototype.sortCol = function (el) { 42 /* 43 * Get cell data for column that is to be sorted from HTML table 44 */ 45 var rows = this.tbl.rows; 46 var alpha = [], numeric = []; 47 var aIdx = 0, nIdx = 0; 48 var th = el.parentNode; 49 var cellIndex = th.cIdx; 50 for (var i=1; rows[i]; i++) { 51 var cell = rows[i].cells[cellIndex]; 52 var content = cell.textContent ? cell.textContent : cell.innerText; 53 /* 54 * Split data into two separate arrays, one for numeric content and 55 * one for everything else (alphabetic). Store both the actual data 56 * that will be used for comparison by the sort algorithm (thus the need 57 * to parseFloat() the numeric data) as well as a reference to the 58 * element's parent row. The row reference will be used after the new 59 * order of content is determined in order to actually reorder the HTML 60 * table's rows. 61 */ 62 var num = content.replace(/(\$|\,|\s)/g, ""); 63 if (parseFloat(num) == num) { 64 numeric[nIdx++] = { 65 value: Number(num), 66 row: rows[i] 67 } 68 } else { 69 alpha[aIdx++] = { 70 value: content, 71 row: rows[i] 72 } 73 } 74 } 75 76 /* 77 * Sort according to direction (ascending or descending) 78 */ 79 var col = [], top, bottom; 80 if (th.className.match("asc")) { 81 top = bubbleSort(alpha, -1); 82 bottom = bubbleSort(numeric, -1); 83 th.className = th.className.replace(/asc/, "dsc"); 84 } else { 85 top = bubbleSort(numeric, 1); 86 bottom = bubbleSort(alpha, 1); 87 if (th.className.match("dsc")) { 88 th.className = th.className.replace(/dsc/, "asc"); 89 } else { 90 th.className += "asc"; 91 } 92 } 93 94 /* 95 * Clear asc/dsc class names from the last sorted column's th if it isnt the 96 * same as the one that was just clicked 97 */ 98 if (this.lastSortedTh && th != this.lastSortedTh) { 99 this.lastSortedTh.className = this.lastSortedTh.className.replace(/dsc|asc/g, ""); 100 } 101 this.lastSortedTh = th; 102 103 /* 104 * Reorder HTML table based on new order of data found in the col array 105 */ 106 col = top.concat(bottom); 107 var tBody = this.tbl.tBodies[0]; 108 for (var i=0; col[i]; i++) { 109 tBody.appendChild(col[i].row); 110 } 111 } 112 113 function bubbleSort(arr, dir) { 114 // Pre-calculate directional information 115 // very useful method for select different direction. 116 var start, end; 117 if (dir === 1) { 118 start = 0; 119 end = arr.length; 120 } else if (dir === -1) { 121 start = arr.length-1; 122 end = -1; 123 } 124 125 // Bubble sort: http://en.wikipedia.org/wiki/Bubble_sort 126 var unsorted = true; 127 while (unsorted) { 128 unsorted = false; 129 for (var i=start; i!=end; i=i+dir) { 130 if (arr[i+dir] && arr[i].value > arr[i+dir].value) { 131 var a = arr[i]; 132 var b = arr[i+dir]; 133 var c = a; 134 arr[i] = b; 135 arr[i+dir] = c; 136 unsorted = true; 137 } 138 } 139 } 140 return arr; 141 }
with so many ,i can afford the link to download the files(http://www.cnblogs.com/accipiter/admin/Files.aspx)of the ch1.7z.