Question

我需要你的一些建议。我已经在网站上实现了HTML表的复选框过滤并且运行良好。现在我试图在表上实现搜索栏，但我无法与现有的复选框合作。这些是我的先决条件：

仅在第一列中搜索
Serch仅用于纯文本（没有链接，图像和格式符号）
当我勾选复选框时，搜索栏仅搜索已过滤的项目，而不搜索隐藏的项目。

使用这部分代码我只获得了前2分，但我无法实现只搜索显示的项目。搜索框仍会搜索所有项目（隐藏的复选框）

     <style>
    table, tr, td, th{
        border: 1px solid blue;
        padding: 2px;
    }

    table th{
        background-color: #999999;
    }


            .datatbl td:nth-of-type(5) {
            display: none;
            }
            .datatbl th:nth-of-type(5) {
            display: none;
            }

            table.datatbl tr:nth-child(even) {
      background: #455168;
    }

    </style>

<table>
        <tbody>
            <tr>
                <td rowspan="2"  style="padding: 0px 0px 0px 0px;"><b>Item Type</b></td>
                <td style="padding: 0px 0px 0px 0px;"><input id="One" name="filter" type="checkbox" value="11" /> 11</td>
                <td style="padding: 0px 0px 0px 0px;"><input id="One" name="filter" type="checkbox" value="22" /> 22</td>

    </tr>

    </tbody>
    </table>


    <table class="datatbl">
      <tbody>
        <tr><th>Unique ID</th><th>Random ID</th><th>Random ID</th><th>Random ID</th><th>Random ID</th></tr>
        <tr><td><a href="https://www.w3schools.com">214215</a></td><td>44211</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
        <tr><td>1252512</td><td>55622</td><td>Random ID</td><td>Random ID</td><td>22</td></tr>
        <tr><td>2114</td><td>466611</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
        <tr><td>3245466</td><td>33411</td><td>Random ID</td><td>Random ID</td><td>11</td></tr>
        <tr><td>24111</td><td>5436422</td><td>Random ID</td><td>Random ID</td><td>22</td></tr>
      </tbody>
    </table>
    <br />
    <input type="text" id="search" placeholder="  live search"></input>


    <script
      src="https://code.jquery.com/jquery-1.8.3.min.js"
      integrity="sha256-YcbK69I5IXQftf/mYD8WY0/KmEDCv1asggHpJk1trM8="
      crossorigin="anonymous"></script>
    <script>
    var $rows = $(".datatbl").find("tr:not(:hidden)");
    $("#search").on("keyup", function() {
        var value = $(this).val();

        $rows.each(function(index) {
            if (index !== 0) {

                $row = $(this);

                var id = $row.find("td:first").text();

                if (id.indexOf(value) !== 0) {
                    $row.hide();
                }
                else {
                    $row.show();
                }
            }
        });
    });




    </script>

    <script>
                jQuery('.datatbl tr > *:nth-child(5)').hide();

                jQuery(document).on('ready', function () {
                    var filter_magic = function (e) {
                        var trs = jQuery('.datatbl tr:not(:first)');

                        trs.hide();
                        var showAll = true;
                        jQuery('input[type="checkbox"][name="filter"]').each(function () {
                            if (jQuery(this).is(':checked')) {
                                var val = jQuery(this).val();
                                trs.each(function () {
                                    var tr = jQuery(this);
                                    var td = tr.find('td:nth-child(5)');
                                    if (td.text() === val) {
                                        tr.show();
                                        showAll = false;
                                    }
                                });
                            }
                        });
                        if (showAll) {
                            trs.show();
                        }
                    };

                    jQuery('input[type="checkbox"][name="filter"]').on('change', filter_magic);
                    filter_magic();
                });
    </script>

Html表复选框过滤器与表搜索栏不需要的行为

0 个答案: