【问题标题】:Javascript/JQuery Searching in table for row by valueJavascript/JQuery 在表中按值搜索行
【发布时间】:2020-12-08 15:50:20
【问题描述】:

我有一个简单的 html 表格,其中有一个 <input type="text">

<input class="font-15 w-300-px" id="SomeID" type="text">
<table id="myTable">
        <thead>
            <tr class="header">
                <th style="width:20%;">One</th>
                <th style="width:20%;">Two</th>
                <th style="width:20%;">Three</th>
                <th style="width:20%;">Four</th>
                <th style="width:20%;">Five</th>
                <th style="width:20%;">Six</th>
            </tr>
        </thead>
        <tbody>
                <tr>
                    <td>
                        <a href="www.w3school.com" target="_blank">
                            aaa
                        </a>
                    </td>
                    <td>
                        <a href="www.idk.com" target="_blank">
                            bb
                        </a>
                    </td>
                    <td>ccc</td>
                    <td>dddd</td>
                    <td>eeee</td>
                    <td>ffff</td>
                </tr>
        </tbody>
    </table>

然后我有这个过滤脚本。 `

var $rows = $('#myTable tr:gt(0)');
        $('#SomeID').keyup(function () {
            var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

            $rows.hide().filter(function () {
                var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
                return ~text.indexOf(val);
            }).show();
        });

我的问题是过滤需要很长时间(我有很多行)。有没有办法只显示 150 行左右?这是解决这个问题的好方法吗?我应该使用其他方式进行过滤吗?谢谢你的一切。

【问题讨论】:

    标签: javascript jquery filter html-table


    【解决方案1】:

    使用 Jquery Data table approch 它提供默认的搜索和排序功能。您还可以添加特定于列的搜索。

    1. $("#Your_Table_Id").DataTable(); 下面的行会将您的表转换为 jquery 数据表。

    更多信息请点击here

    【讨论】:

      【解决方案2】:

      如果您只需要 150 行,请使用从 0 开始并在 150 结束的迭代器并在其中过滤,在您到达第 150 行后它应该停止过滤。这可能不是一个完整的答案,因为我不是 Js 开发者,但请尝试在这个方向上进行试验或搜索,同时有人会给你一个更准确的答案。

      有很多关于遍历表的已回答问题,我觉得有更好的过滤方法,例如遍历每一行并使用 If 语句定义一个需求以确定您是否要对该行执行某些操作或转到下一个。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-01-07
        • 1970-01-01
        • 2021-06-22
        • 2013-11-09
        • 2021-09-09
        • 1970-01-01
        • 2020-02-01
        相关资源
        最近更新 更多