Lab 02. Table Sorter | 易学教程

题目

在给定源代码：source-code.zip的基础上，完成Table sorter。

Table sorter包括JavaScript和一点CSS，能够让原始的html table变得可以分别按照各栏数据值，对各行排序。

效果

在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序

按照字符串比较来确定顺序

再次点击该栏目，变更为降序排序
点击其它栏目，则按其它栏目的值重新排序
注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色

未点击	点击	再击	点击其它

* 虽然上面例图中只显示了To-Do表格的变化，实际上Staff表格也是sortable的。

要求

不能改动原html，只能够添加js和css文件
不能使用任何类库，只能用原生DOM API
JavaScript必须模块化，JS的调用入口，必须按照下面的图示：

也就是说，JS中要完成makeAllTablesSortable(table-doms) 方法，该方法接受一组普通table DOM元素，将它们全部变成sortable

附加要求

学有余力的同学还可以尝试用这个makeAllTablesSortable，使其它网页的table变得sortable。具体做法是打开一个有table的网页，开启控制台，然后在控制台中执行你的makeAllTablesSortable方法，看看能否将tables变得sortable。

完成了附加要求的同学，请在提交的README中给出URL列表，说明可以变更的网页。

重点

JavaScript基本语法
程序的模块化设计
DOM
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

来源：oschina

链接：https://my.oschina.net/u/1585804/blog/415947

标签

table

background

lab