JavaScript实现报表过滤

JavaScript实现表格过滤

用JavaScript实现表格过滤，设计一个Filterable Table。

应用makeAllTablesFilterable之后，每个table附加一个输入域，用户输入字符之后，table中不包含这些字符的rows将消失，仅剩下含有相应字符的rows，并且相应字符会突出显示。

效果：

JavaScript实现报表过滤

filter.js:

"use strict";

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

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

//高亮显示
function heightlight(node, keyword) {
    node.innerHTML = node.innerHTML.replace(new RegExp(keyword,"g"),"<span class='heightlight'>"+keyword+"</span>");
}

//清除高亮
function clearHeightlight(node) {
    node.innerHTML = node.innerHTML.replace(/<span class=\"heightlight\">/g, "").replace(/<\/span>/g, "");
}

//恢复显示
function showAllTr(table) {
    var tr = table.getElementsByTagName("tr");
    for (var i = 1; i < tr.length; i++) {
        tr[i].hidden = false;
    }
}

//让列表变得可能够过滤
function makeFilterable(table) {
    var input = document.createElement("input");

    input.oninput  = function() {
        clearHeightlight(table);
        showAllTr(table);

        //过滤词为空则直接返回
        if (!this.value)
            return;
        for (var i = 1; i < table.getElementsByTagName("tr").length; i++) {
            var tr = table.getElementsByTagName("tr")[i];
            //查找是否含有关键字,不含有则隐藏
            if ( tr.innerHTML.indexOf(this.value) == -1) {
                 tr.hidden = true;
                continue;
            }
            for (var j = 0; j <  tr.cells.length; j++)
                heightlight(tr.cells[j], this.value);
        }
    };
    table.parentNode.insertBefore(input,table);
    return table;
}

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

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>Filterable table</title>
    <link rel="stylesheet" type="text/css" href="filter.css" />
    <script type="text/javascript" src="filter.js"></script>
</head>
<body>
<h1>Filterable 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>

filter.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");
}

/*高亮关键字,跟firefox的高亮一样*/
.heightlight {
    background-color: #38D878;
    color: white;
    border: none;
    padding: 0;
}

用JavaScript实现表格过滤，设计一个Filterable Table。

效果：

filter.js:

html：

filter.css:

相关推荐