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

学习笔记 专栏收录该内容
5 篇文章 0 订阅


最近,一直在学习前端方面的知识,看到网上有一些页面的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;" οnchange="tableFilter()" /></td>
        </tr>
    </table>
</body>
</html>






  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值