The Art & Science of JavaScript (section Ⅱ)

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.