JavaScript实现表格排序

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

效果

  1. 在表头任意一个栏目中点击一下,下面各行将按照此栏目值的升序排序
    按照字符串比较来确定顺序
  2. 再次点击该栏目,变更为降序排序
  3. 点击其它栏目,则按其它栏目的值重新排序
  4. 注意,排序时,栏目奇偶行的背景色保持奇数白色、偶数浅灰色

要求

  1. 不能改动原html,只能够添加js和css文件
  2. 不能使用任何类库,只能用原生DOM API
  3. JavaScript必须模块化,JS的调用入口,必须按照下面的图示:
    JavaScript实现表格排序_第1张图片

JavaScript实现表格排序_第2张图片
JavaScript实现表格排序_第3张图片

sorter.js:

"use strict";

window.onload = function () {
    var tables = getAllTables();
    makeAllTablesSortalbe(tables);
};

//嵌入的话用下面两行..
// var tables = getAllTables();
// makeAllTablesSortalbe(tables);
function getAllTables() {
    return document.getElementsByTagName("table");
}


function makeAllTablesSortalbe(tables) {
    for (var i = 0; i < tables.length; i++)
        makeSort(tables[i]);
}

//让列表变得可排序
function makeSort(table) {
    var th = table.getElementsByTagName("th");
    for (var i = 0; i < th.length; i++) {
        //绑定按钮事件
        th[i].onclick = function () {
            var index = 0;
            changeStyle(th, this);
            //找出索引值
            for (var j = 0; j < th.length; j++) {
                if (this == th[j])
                    index = j;
            }
            sortByTh(table, index, this.className);
        };
    }
}

//改变样式
function changeStyle(th, t) {
    for (var i = 0; i < th.length; i++) {

        if (th[i] == t) {

            if (th[i].className.indexOf("descend") != -1 )
                th[i].className = th[i].className.replace("descend", "ascend");
            else if (th[i].className.indexOf("ascend") != -1 )
                th[i].className = th[i].className.replace("ascend", "descend");
            else
                th[i].className += " descend";

        } else {
            th[i].className = th[i].className.replace("descend", "");
            th[i].className = th[i].className.replace("ascend", "");
        }
    }
}

//排序
function sortByTh(table, index, className) {
    var action = className.indexOf("descend") != -1 ? "descend" : "ascend";
    var array = [];
    for (var i = 1; i < table.getElementsByTagName("tr").length; i++) {
        array[i-1] = table.getElementsByTagName("tr")[i];
    }
    array.sort(function (a, b) {
        //升序
        if (action == 'descend') {
            return a.cells[index].innerHTML <= b.cells[index].innerHTML;
        } else {
        //降序
            return a.cells[index].innerHTML >= b.cells[index].innerHTML;
        }
    });

    for (var i = 0; i < array.length; i++)
        table.getElementsByTagName("tbody")[0].appendChild(array[i]);
}

CSS:

    border: 1px solid gray;
    margin: 0;
    padding: 3px;
    border-collapse: collapse;
}

tr:nth-child(even),tr:hover {
    background-color: #DEDEDE;
}

th {
    text-align: left;
    background-color: #041A7F;
    color: white;
    font-weight:  bold;
    padding-right:16px;
}

.ascend, .descend {
    background-color: #A4B0FC;
    background-position: right;
    background-repeat: no-repeat;
}

.ascend {
    background-image: url("ascend.png");
}

.descend {
    background-image: url("descend.png");
}

index.html


<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 tabletitle>
    <link rel="stylesheet" type="text/css" href="sorter.css" />
    <script type="text/javascript" src="sorter.js">script>
head>
<body>
<h1>Sortable tableh1>

<h2>To-Doh2>

<table id="todo">
    <thead>
        <tr>
            <th>What?th>
            <th>When?th>
            <th>Locationth>
        tr>
    thead>
    <tbody>
        <tr>
            <td>Paris Web 2007td>
            <td>2007-11-15td>
            <td>IBM La Defense / INSIAtd>
        tr>
        <tr class="alternate">
            <td>Paris On Rails 2007td>
            <td>2007-12-10td>
            <td>Cite des Sciencestd>
        tr>
        <tr>
            <td>Burger Quiz partytd>
            <td>2007-04-14td>
            <td>Voltatd>
        tr>
    tbody>
table>

<h2>Staffh2>

<table id="staff">
    <thead>
        <tr>
            <th>First nameth>
            <th>Last nameth>
            <th>Latest checkinth>
        tr>
    thead>
    <tbody>
        <tr>
            <td>Richardtd>
            <td>Piacentinitd>
            <td>2007-03-27td>
        tr>
        <tr class="alternate">
            <td>Erictd>
            <td>Daspettd>
            <td>2007-03-28td>
        tr>
        <tr>
            <td>Auroretd>
            <td>Jaballahtd>
            <td>2007-03-15td>
        tr>
    tbody>
table>

body>
html>

sorter.css

table, tr *{
    border: 1px solid gray;
    margin: 0;
    padding: 3px;
    border-collapse: collapse;
}

tr:nth-child(even),tr:hover {
    background-color: #DEDEDE;
}

th {
    text-align: left;
    background-color: #041A7F;
    color: white;
    font-weight:  bold;
    padding-right:16px;
}

.ascend, .descend {
    background-color: #A4B0FC;
    background-position: right;
    background-repeat: no-repeat;
}

.ascend {
    background-image: url("ascend.png");
}

.descend {
    background-image: url("descend.png");
}

你可能感兴趣的:(JavaScript)