JavaScript实现表格过滤

页面导航:首页 > 网络编程 > JavaScript > JavaScript实现表格过滤

JavaScript实现表格过滤

来源: 作者: 时间:2016-02-02 09:59 【

用JavaScript实现表格过滤,设计一个Filterable Table。应用makeAllTablesFilterable之后,每个table附加一个输入域,用户输入字符之后,table中不包含这些字符的rows将消失,仅剩下含有相应字符的

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

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

效果:

这里写图片描述
这里写图片描述

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"),""+keyword+"");
}

//清除高亮
function clearHeightlight(node) {
    node.innerHTML = node.innerHTML.replace(//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:


<script type="text/javascript" src="filter.js"></script>

Filterable table

To-Do

What? When? Location
Paris Web 2007 2007-11-15 IBM La Defense / INSIA
Paris On Rails 2007 2007-12-10 Cite des Sciences
Burger Quiz party 2007-04-14 Volta

Staff

First name Last name Latest checkin
Richard Piacentini 2007-03-27
Eric Det 2007-03-28
Aurore Jaballah 2007-03-15

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;
}
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<