JS学习——sort-table的实现

来源：互联网发布：杜冷丁多少钱一支淘宝编辑：程序博客网时间：2024/05/29 18:51

本次的练习题是我的导师给本科生学习javascript的一次作业，使用最基本的javascript语法，目的在于学习js的DOM关系以及操作。题目描述：1.在表头任意一个栏目中点击一下，下面各行将按照此栏目值的升序排序(按照字符串比较来确定顺序)。2.再次点击该栏目，变更为降序排序3.点击其它栏目，则按其它栏目的值重新排序4.注意，排序时，栏目奇偶行的背景色保持奇数白色、偶数浅灰色

效果图如下：
1.初始状态：

2.点击：
这里写图片描述
3.再击：

4.点击其他：

要求：

1.不能修改原来的html文件，只能添加js和css文件。
2.不能使用任何类库，只能用原生DOM API。
3.JavaScript必须模块化，JS的调用入口，必须按照下面的图示：
这里写图片描述

思考实现：
1.初始的html代码（实现时不能添加任何代码）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>Sortable table</title>    <link rel="stylesheet" type="text/css" href="sorter.css" />    <script type="text/javascript" src="sorter.js"></script></head><body><h1>Sortable table</h1><h2>To-Do</h2><table id="todo">    <thead>        <tr>            <th>What?</th>            <th>When?</th>            <th>Location</th>        </tr>    </thead>    <tbody>        <tr>            <td>Paris Web 2007</td>            <td>2007-11-15</td>            <td>IBM La Defense / INSIA</td>        </tr>        <tr class="alternate">            <td>Paris On Rails 2007</td>            <td>2007-12-10</td>            <td>Cite des Sciences</td>        </tr>        <tr>            <td>Burger Quiz party</td>            <td>2007-04-14</td>            <td>Volta</td>        </tr>    </tbody></table><h2>Staff</h2><table id="staff">    <thead>        <tr>            <th>First name</th>            <th>Last name</th>            <th>Latest checkin</th>        </tr>    </thead>    <tbody>        <tr>            <td>Richard</td>            <td>Piacentini</td>            <td>2007-03-27</td>        </tr>        <tr class="alternate">            <td>Eric</td>            <td>Daspet</td>            <td>2007-03-28</td>        </tr>        <tr>            <td>Aurore</td>            <td>Jaballah</td>            <td>2007-03-15</td>        </tr>    </tbody></table></body></html>

2.先设定好初始的table样式，偶数行的背景颜色设置用:nth-child()选择器实现：

*{    margin: 10px;    padding: 0px;}table{    border-spacing: 0px;}#todo,#staff{    border: solid 1px grey;    border-bottom:none;    border-right:none;}tr th,td{    border-bottom: solid 1px grey;    border-right: solid 1px grey;    width: 150px;    text-align: left;}tr th{    background-color: darkblue;    color:#fff;}thead tr:hover{    cursor:pointer;}tbody tr:nth-child(even){    background-color:lightgrey;}

3.通过给th设置className来改变样式，在css添加样式：

/*class*/.origin{    background-color:darkblue;    color:#fff;}.descend{    color:#fff;    background: lightblue url(descend.png) no-repeat right;}.ascend{    color:#fff;    background: lightblue url(ascend.png) no-repeat right;}

js部分，取到所有的table，然后对所有的table的thead的每一个子元素绑定一个click事件，事件主要做两件事：1.改变被点击的th的样式；2.根据被点击的th来对tbody的tr进行排序：

window.onload = function(){    var tables = getAllTables();    makeAllTablesSortable(tables);}function getAllTables(){    return document.getElementsByTagName("table"); }function makeAllTablesSortable(tables){    this.tables = tables;    for ( var i = 0 ; i < tables.length; ++i ){        var ths = tables[i].getElementsByTagName("th");        for ( var j = 0 ; j < ths.length ; ++j ){            ths[j].onclick = function(){                var th = this;                var table = this.parentElement.parentElement.parentElement;                makeTableSortable(th,table);            };         }    }}function makeTableSortable(th,table){    changeStyle(th);    var thatTr = th.parentElement;    var index;    for ( var i = 0 ; i < thatTr.cells.length ; i++ ){        if ( thatTr.cells[i] === th ) index = i;    }    var bodyTr = table.querySelectorAll("tbody tr");    var array = new Array();    for ( var j = 0 ; j < bodyTr.length ; j++ ){        array.push(bodyTr[j]);    }    var newBody;    if ( th.className === "descend" ) newBody = desorder(array,index);    else newBody = ascorder(array,index);    table.replaceChild(newBody,table.lastChild);}function changeStyle(th){    if ( !th.className || th.className === "origin"){        th.className = "descend";        var theTr = th.parentElement;        for ( var i = 0 ; i < theTr.cells.length ; ++i ){            if ( theTr.cells[i] !== th ){                theTr.cells[i].className = "origin";            }         }    }else if ( th.className === "descend" ){        th.className = "ascend";    }else if ( th.className === "ascend" ){        th.className = "descend";    }}function desorder(trArr,index){    var newTbody = document.createElement("tbody");    for( var i = 0 ; i < trArr.length ; i++ ){        for( var j=i+1 ; j < trArr.length ; j++ ){            if ( trArr[j].cells[index].innerText < trArr[i].cells[index].innerText ){                var temp = trArr[i];                trArr[i] = trArr[j];                trArr[j] = temp;            }        }     }    while( trArr.length !== 0 ){        newTbody.appendChild(trArr.pop());    }    return newTbody;}function ascorder(trArr,index){    var newTbody = document.createElement("tbody");    for( var i = 0 ; i < trArr.length ; i++ ){        for( var j=i+1 ; j < trArr.length ; j++ ){            if ( trArr[j].cells[index].innerText > trArr[i].cells[index].innerText ){                var temp = trArr[i];                trArr[i] = trArr[j];                trArr[j] = temp;            }        }     }    while( trArr.length !== 0 ){        newTbody.appendChild(trArr.pop());    }    return newTbody;}

github地址：
https://github.com/feizhen/sort-table

0 0