您的位置：首页 > Web前端 > JavaScript

利用js实现table的无刷新静态内容过滤

2015-08-13 11:02 796 查看

最近，一直在学习前端方面的知识，看到网上有一些页面的table能够实现静态内容筛选，觉得这个东西有点意思，由于初学js就想试试。

我看了一些网上有关的案例http://www.freejs.net/article_jquerywenzi_219.html，这个案例就是较为典型的，但是是使用了jQuery：

<script type="text/javascript">
      $(function () {
        $("table").addTableFilter();
      });
</script>

就是这样一段代码就可以把效果显示出来，这是使用jQuery库带来的一个好处，但是我觉得使用jQuery所带来的后果更多是让我们能力受到更多地限制，所以我比较提倡使用JavaScript来真正实现自己的想法，这样一来我们对代码的理解能够得到进一步的加深。我的js代码如下：

function tableFilter() {
            var keyword = document.getElementById("yunman").value.toLowerCase().split(" ");
            var table = document.getElementById("table");
            var ele;
            for (var r = 0; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML;
                var displayStyle = 'none';
                for (var i = 0; i < keyword.length; i++) {
                    if (keyword == "") { displayStyle = ""; break; }
                    if (ele.toLowerCase().indexOf(keyword[i]) > 0) {
                        displayStyle = '';
                    }
                    else {
                        displayStyle = 'none';
                        break;
                    }
                }
                table.rows[r].style.display = displayStyle;
            }
        }

此处作一些说明：keyword是搜索文本框中的内容，提供了多重搜索，只要使用空格键隔开就可以实现。

使用两个for循环：外循环用于实现将table中每一行提取出来，内循环用于实现行内内容与keyword的比较。
此处给一个整体的测试代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>表格</title>
    <script type="text/javascript">
function tableFilter() {
            var keyword = document.getElementById("yunman").value.toLowerCase().split(" ");
            var table = document.getElementById("table");
            var ele;
            for (var r = 0; r < table.rows.length; r++) {
                ele = table.rows[r].innerHTML;
                var displayStyle = 'none';
                for (var i = 0; i < keyword.length; i++) {
                    if (keyword == "") { displayStyle = ""; break; }
                    if (ele.toLowerCase().indexOf(keyword[i]) > 0) {
                        displayStyle = '';
                    }
                    else {
                        displayStyle = 'none';
                        break;
                    }
                }
                table.rows[r].style.display = displayStyle;
            }
        }    </script>
</head>
<body>
    <table style="border-collapse: collapse; border:solid;" cellpadding="4" cellspacing="0" width="80%">
        <thead>
            <tr>
                <th colspan="5" style="border-collapse: collapse; border:solid;">终端销售</th>
            </tr>
            <tr style=" background-color:#DDDDDD">
                <th align="left">手机名称</th>
                <th align="left">价格</th>
                <th align="left">库存</th>
                <th align="left">描述</th>
                <th align="left">销售营业厅</th>
            </tr>
        </thead>
        <tbody id="table">
            <tr>
                <td>iPhone6</td>
                <td>6088</td>
                <td>112</td>
                <td>最新苹果手机，4.3英寸</td>
                <td>东城移动广场厅</td>
            </tr>
            <tr>
                <td>iPhone6 Plus</td>
                <td>7088</td>
                <td>5</td>
                <td>最新Plus版，5.5英寸</td>
                <td>南城厅</td>
            </tr>
            <tr>
                <td>三星 Note 4</td>
                <td>5088</td>
                <td>41</td>
                <td>三星最新手机旗舰版</td>
                <td>北区厅</td>
            </tr>
            <tr>
                <td>HTC One</td>
                <td>4088</td>
                <td>31</td>
                <td>HTC最新旗舰版</td>
                <td>西区厅</td>
            </tr>
            <tr>
                <td>华为Mate 7</td>
                <td>3088</td>
                <td>24</td>
                <td>华为手机旗舰版</td>
                <td>西区厅</td>
            </tr>
            <tr>
                <td>小米Note</td>
                <td>2088</td>
                <td>112</td>
                <td>小米最新旗舰版</td>
                <td>东区厅</td>
            </tr>
        </tbody>
        <tr>
            <td colspan="5">全文搜索：<input id="yunman" type="text" style="width:600px;" onchange="tableFilter()" /></td>
        </tr>
    </table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航