Lab 02. Table Sorter

                                                                

題目

在給定源代碼：source-code.zip的基礎上，完成Table sorter。

Table sorter包括JavaScript和一點CSS，可以讓原始的html table變得能夠分別按照各欄數據值，對各行排序。

效果

1. 在表頭任意一個欄目中點擊一下，下面各行將按照此欄目值的升序排序
   

1. 按照字符串比較來肯定順序

2. 再次點擊該欄目，變動爲降序排序

3. 點擊其它欄目，則按其它欄目的值從新排序

4. 注意，排序時，欄目奇偶行的背景色保持奇數白色、偶數淺灰色

未點擊	點擊	再擊	點擊其它

* 雖然上面例圖中只顯示了To-Do表格的變化，實際上Staff表格也是sortable的。

要求

1. 不能改動原html，只可以添加js和css文件

2. 不能使用任何類庫，只能用原生DOM API

3. JavaScript必須模塊化，JS的調用入口，必須按照下面的圖示：
   
   也就是說，JS中要完成makeAllTablesSortable(table-doms) 方法，該方法接受一組普通table DOM元素，將它們所有變成sortable

附加要求

學有餘力的同窗還能夠嘗試用這個makeAllTablesSortable，使其它網頁的table變得sortable。具體作法是打開一個有table的網頁，開啓控制檯，而後在控制檯中執行你的makeAllTablesSortable方法，看看可否將tables變得sortable。

完成了附加要求的同窗，請在提交的README中給出URL列表，說明能夠變動的網頁。

重點

1. JavaScript基本語法

2. 程序的模塊化設計

3. DOM 

4. DOM Event

高級提點：Object Oriented Programming

簡單的css：

th {
    border: 1px solid #98A9EC;
    background-color: #031B7F;
    color: white;
    transition:background-color 1s;
}

th:hover {
    background-color: #A3B1FC;
}

td {
    border: 1px solid #7181BC;
    padding: 2px;
}

td, th {
    text-align: left;
    height: 20px;
    padding: 2px;
}

.alternate {
    background-color: #DDDDDD;
}

table {
    border:0;
    border-spacing:0;
  }

  #todo {
      width: 470px;
  }

 #staff  {
     width: 420px;
  }

.Ascending {
    background-image: url("ascend.png");
    background-position: right;
    background-repeat: no-repeat;
    background-color: #A3B1FC;
}

.Descending {
    background-image: url("descend.png");
    background-position: right;
    background-repeat: no-repeat;
    background-color: #A3B1FC;
}

js代碼：

/*
    Author: ye jiaqi
    Time: 13 March 2015
*/

// making all tables sortable
window.onload = function() {
    var tables = getAllTables();
    makeAllTablesSortable(tables);
}

// to get all tables in the web page
function getAllTables() {
    return document.getElementsByTagName("table");
}

// make the tables sortable by clicking on the table head
function makeAllTablesSortable(tables) {
    for(var i = 0; i < tables.length; i ++) {
        // get all table heads for each table
        var table_heads = tables[i].getElementsByTagName("th");
        // ther is someone who do not use the "th" tag
        if (table_heads.len == 0) {
            table_heads = tables[i].rows[0];
        }

        // give each thead an id to clarify each colum
        for(var j = 0; j < table_heads.length; j++) {
            table_heads[j].setAttribute("id", j);
        }

        // for each click on the the head, make a response
        for(var j = 0; j < table_heads.length; j++) {
            // give another function
            table_heads[j].onclick = function() {
                // this.parentNode.parentNode.parentNode means the table
                sort(this.parentNode.parentNode.parentNode, this);
            }
        }
    }
}

function sort(table, head) {
    var to_sort = [];
    head_id = head.id;
    row_len = table.rows.length;
    // get the Sequence if whether the table colum is already sorted or not
    Sequence = head.getAttribute("class");

    // get each row for sorting
    for(var i = 1; i < row_len; i++) {
        to_sort[i] = table.rows[i];
    }

    // sort it
    to_sort.sort(compare(Sequence));

    // prevent reference error
    for(var i = 0; i < row_len-1; i++) {
        to_sort[i] = to_sort[i].innerHTML;
    }

    // change the rows
    for(var i = 0; i < row_len-1; i++) {
        table.rows[i+1].innerHTML = to_sort[i];
    }

    // set other soeted colum to be none
    for (var i = 0; i < table.rows[0].cells.length; i++) {
        table.rows[0].cells[i].setAttribute("class", "")
    }

    // set the Sequnce
    if(Sequence != "Ascending")
        head.setAttribute("class", "Ascending")
    else
        head.setAttribute("class", "Descending")

}

function compare(Sequence) {
    return function(row1,row2) {
        var value1 = row1.cells[head_id].innerHTML;
        var value2 = row2.cells[head_id].innerHTML;

        // use  diffrenet sorting method for different status

        if (value1 < value2) {
            return  (Sequence == "Ascending" ? 1 : -1);
        } else if (value1 > value2) {
            return  (Sequence == "Ascending" ? -1 : 1);
        } else  {
            return 0;
        }
    }
}

github:https://github.com/ghostbody/hw2-table-sorter